/* ==========================================================================
   TDT Design System — Elementor/DreamsLMS skin
   --------------------------------------------------------------------------
   Site-specific bridge that maps the brand tokens onto the existing Elementor
   build. Loads AFTER the design-system bundle and Elementor's kit CSS.

   Strategy:
   - Override Elementor's GLOBAL CSS variables (the values widgets reference),
     scoped to `body[class*="elementor-kit-"]` so it beats Elementor's own
     `.elementor-kit-NNN` rule on specificity regardless of load order.
   - Swap the site's Sora typography globals → Barlow (body); force real
     headings → Barlow Condensed (the brand display face).
   - The site is already green (#008752); we only correct stray Elementor
     DEFAULT globals and lock light mode so OS dark-mode can't flip the brand.
   ========================================================================== */

/* ---- 1. Lock light mode -------------------------------------------------- */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --tdt-color-bg: #ffffff;        --tdt-color-bg-subtle: #f7f8f8;
    --tdt-color-bg-muted: #eef0f0;  --tdt-color-surface: #ffffff;
    --tdt-color-text: #1a1c1d;      --tdt-color-text-muted: #626466;
    --tdt-color-link: #00714a;      --tdt-color-link-hover: #005840;
    --tdt-color-border: #dde0e1;
    --tdt-color-inverse: #1a1c1d;   --tdt-color-on-inverse: #ffffff;
  }
}

/* ---- 2. Brand colour + typography globals -------------------------------- */
body[class*="elementor-kit-"] {
  /* Correct ONLY Elementor's off-brand default primary/accent (site customs are
     already green). Do NOT remap `secondary`/`text`: buttons bind their hover
     background to the `secondary` global, so a dark value there turns hovers black. */
  --e-global-color-primary: #008752;  /* was #6EC1E4 */
  --e-global-color-accent:  #008752;  /* was #61CE70 */

  /* Swap EVERY kit typography family from Sora → Barlow (body face) */
  --e-global-typography-primary-font-family:   "Barlow";
  --e-global-typography-secondary-font-family: "Barlow";
  --e-global-typography-text-font-family:      "Barlow";
  --e-global-typography-accent-font-family:    "Barlow";
  --e-global-typography-10d0952-font-family:   "Barlow";
  --e-global-typography-2e23ed6-font-family:   "Barlow";
  --e-global-typography-3280633-font-family:   "Barlow";
  --e-global-typography-34f7259-font-family:   "Barlow";
  --e-global-typography-469a01a-font-family:   "Barlow";
  --e-global-typography-7168152-font-family:   "Barlow";
  --e-global-typography-9189836-font-family:   "Barlow";
  --e-global-typography-a28a57e-font-family:   "Barlow";
  --e-global-typography-c11b400-font-family:   "Barlow";
  --e-global-typography-c792bed-font-family:   "Barlow";
  --e-global-typography-e116616-font-family:   "Barlow";
  --e-global-typography-ea21df9-font-family:   "Barlow";
}

/* ---- 3. Headings use the brand DISPLAY face (Barlow Condensed) ----------- */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---- 4. Buttons → design-system polish --------------------------------- */
/* Brand font + radius (the site's CTAs are already brand-green at rest, so we
   don't force a normal-state background — we only refine type, shape, hover). */
.elementor-button,
.wpcf7-submit,
.wp-block-button__link,
button.button,
input[type="submit"] {
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  border-radius: var(--tdt-radius-md, 8px) !important;
  transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease !important;
}
/* Darker-green hover + subtle lift. The `body[class*=elementor-kit-]` prefix
   raises specificity above Elementor's per-widget hover rule (which binds the
   background to the `secondary` global = dark grey), so green reliably wins. */
body[class*="elementor-kit-"] .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-button:focus,
.wpcf7-submit:hover,
input[type="submit"]:hover {
  background-color: #00714a !important;   /* brand green-600 */
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--tdt-shadow-md, 0 4px 10px rgba(14,15,16,.10));
}
.elementor-button:active { transform: translateY(0); }
.elementor-button:focus-visible,
input[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: var(--tdt-shadow-focus, 0 0 0 3px rgba(31,158,104,.35)) !important;
}

/* Tutor LMS course-search submit (the coral magnifier button) → brand green */
.tutor-course-form-wrapper .sub-btn,
.tutor-course-form-wrapper button[type="submit"],
.tutor-course-btn.sub-btn {
  background-color: #008752 !important;
  border-color: #008752 !important;
  color: #fff !important;
}
.tutor-course-form-wrapper .sub-btn:hover,
.tutor-course-btn.sub-btn:hover {
  background-color: #00714a !important;
}

/* ---- 5. Links inherit the brand green where the theme hasn't set one ----- */
.elementor-widget-text-editor a:not(.elementor-button) {
  color: var(--tdt-color-link, #00714a);
}

/* ---- 6. Header: remove the top utility bar (notice + phone) ------------- */
/* The "Business Qualifications" notice moves to its own page; the phone moves
   up to the main nav row (handled separately). Hide the entire top strip. */
.header_top { display: none !important; }

/* Logo: smaller (original 185px wide) */
.elementor-location-header img.wp-image-1243 {
  width: 135px !important;
  height: auto !important;
}

/* ---- 7. Phone "call" button at menu level (appended via functions.php) -- */
.tdt-phone-item {
  display: flex !important;
  align-items: center;
  margin-left: var(--tdt-space-3, 0.75rem);
}
/* Clean text treatment — no filled box: green phone icon + bold dark number. */
.tdt-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent !important;
  color: var(--tdt-color-text, #1a1c1d) !important;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0.25rem;
  border-radius: 0;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .12s ease;
}
.tdt-phone-link i { color: #008752; font-size: 0.9em; }
.tdt-phone-link:hover { color: #008752 !important; background: transparent !important; transform: none; box-shadow: none; }
.tdt-phone-link:hover i { color: #00714a; }

/* ---- 8. Search field: remove the decorative magnifier on the LEFT ------- */
.tutor-course-form-wrapper .input-group > .search-icon { display: none !important; }

/* ---- 9. Hero: fix the washout, centre content, white text -------------- */
/* The section's Elementor background overlay was WHITE @ 0.75 (the washout).
   Recolour it to a dark brand wash. This is Elementor's own overlay, already
   layered over the video and under the content — so it just works. */
.elementor-element-309f7dc::before,
.elementor-42 .elementor-element.elementor-element-309f7dc > .elementor-background-video-container::before,
.elementor-element-309f7dc > .elementor-background-overlay {
  background-color: #00281d !important;   /* dark brand green */
  opacity: 0.60 !important;
}
/* Dark base background so the white hero text stays readable even when the bg
   VIDEO doesn't play (mobile autoplay is off by default) — fixes the blank hero. */
.elementor-element-309f7dc { background-color: #00281d !important; }
/* Centre the hero content: force both wrapper containers to a full-width,
   centred column so the heading, intro and search all share one centre line. */
.elementor-element-50145c7,
.elementor-element-b1a4679 {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}
.elementor-element-79de988 { width: 100% !important; }
/* Intro: full-width container but constrain the text to a readable centred measure */
.elementor-element-1fa29a6 {
  width: 100% !important;
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Centre the reviews (Trustindex) block under the search bar */
.elementor-element-309f7dc .ti-widget,
.elementor-element-309f7dc .ti-widget [class*="ti-row"],
.elementor-element-309f7dc [class*="ti-reviews-container"] {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Heading lives in the row (not the column) — centre it directly + forcefully */
.elementor-element-79de988,
.elementor-element-79de988 > .elementor-widget-container,
.elementor-element-79de988 .elementor-headline {
  text-align: center !important;
}
.elementor-element-1fa29a6,
.elementor-element-1fa29a6 .elementor-widget-container,
.elementor-element-1fa29a6 p { text-align: center !important; }
/* White text over the now-dark hero (review cards/search box keep their own bg) */
.elementor-element-79de988 .elementor-headline-plain-text { color: #ffffff !important; }
.elementor-element-79de988 .elementor-headline-dynamic-text { color: #54b888 !important; }
.elementor-element-1fa29a6,
.elementor-element-1fa29a6 * { color: #ffffff !important; }
/* Remove the decorative green vertical line (image widget) beside the heading */
.elementor-element-e83a09d { display: none !important; }
/* Trustindex summary (EXCELLENT + "Based on X reviews") over the dark hero → white.
   Best-effort on the JS-rendered widget; the white review CARDS keep their dark text. */
.elementor-element-309f7dc .ti-rating-text,
.elementor-element-309f7dc .ti-rating-text *,
.elementor-element-309f7dc .ti-header,
.elementor-element-309f7dc .ti-header *,
.elementor-element-309f7dc .ti-footer,
.elementor-element-309f7dc .ti-footer *,
.elementor-element-309f7dc .ti-reviews-count,
.elementor-element-309f7dc .ti-widget > .ti-row > .ti-col:first-child {
  color: #ffffff !important;
}
/* The small "Trustindex" branding link (cards link to google.com, so this only
   targets the Trustindex footer brand, not the review authors). */
.elementor-element-309f7dc a[href*="trustindex"],
.elementor-element-309f7dc a[href*="trustindex"] * { color: #ffffff !important; }

/* ---- 10. Course cards: softer design-system styling -------------------- */
/* `.course-box .product` = confirmed DreamsLMS cards; the tutor-* selectors are
   a best-effort for the Tutor archive cards (refine once seen). */
.course-box .product,
.tutor-card,
.tutor-course.tutor-card,
.tutor-courses-wrap .tutor-course,
.tutor-course-listing .tutor-course {
  border-radius: var(--tdt-radius-lg, 12px) !important;
  border: 1px solid var(--tdt-color-border, #dde0e1) !important;
  box-shadow: var(--tdt-shadow-sm, 0 1px 3px rgba(14,15,16,.10)) !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
/* Rounded thumbnail corners follow the card */
.course-box .product img,
.tutor-card .tutor-course-thumbnail img { border-radius: 0 !important; }
/* A touch more breathing room in the card body */
.course-box .product .product-content,
.tutor-card .tutor-card-body { padding: var(--tdt-space-4, 1rem) !important; }

/* ---- 11. Header dropdown / mega sub-menus: refine ---------------------- */
.elementskit-submenu-panel,
.elementskit-megamenu-panel,
.elementskit-menu-container .elementskit-submenu-panel {
  background: #ffffff !important;
  border: 1px solid var(--tdt-color-border, #dde0e1) !important;
  border-radius: var(--tdt-radius-md, 8px) !important;
  box-shadow: 0 14px 34px rgba(14,15,16,.14) !important;
  padding: 0.4rem !important;
  /* IMPORTANT: no top gap. ElementsKit shows the dropdown on pure CSS :hover and
     its hidden state is display:none + pointer-events:none, so any margin gap
     between the item and the panel is a "dead zone" that closes the menu before
     you reach it (an invisible ::before bridge can't help — the panel doesn't
     exist while display:none). The panel is a DOM child of the menu item, so with
     the panel flush (margin 0) hovering down onto it keeps the item :hover and the
     dropdown stays open. */
  margin-top: 0 !important;
}
/* NOTE: These header items (Our Expertise / Future Students / Why Us / About) are
   intentional icon MEGA-MENUS (multi-column icon+label panels); "Courses" is a
   plain relative submenu. Do NOT force the mega-menu panels narrow/under-the-item
   — that squishes the columns and wraps the labels. Their full-width left-anchored
   position is by design. */

/* Force the dropdown to stay open while hovering the item OR the panel itself,
   overriding ElementsKit's JS that closes it too quickly to reach sub-links. */
.elementor-element-00b7b11 .elementskit-navbar-nav li.elementskit-dropdown-has:hover > .elementskit-submenu-panel,
.elementor-element-00b7b11 .elementskit-navbar-nav li.elementskit-dropdown-has:hover > .elementskit-megamenu-panel,
.elementor-element-00b7b11 .elementskit-navbar-nav .elementskit-submenu-panel:hover,
.elementor-element-00b7b11 .elementskit-navbar-nav .elementskit-megamenu-panel:hover {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.elementskit-submenu-panel li > a,
.elementskit-megamenu-panel li > a {
  font-family: "Barlow", system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #010524 !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: var(--tdt-radius-sm, 4px) !important;
  transition: background-color .12s ease, color .12s ease !important;
}
.elementskit-submenu-panel li > a:hover,
.elementskit-megamenu-panel li > a:hover,
.elementskit-submenu-panel li.elementskit-dropdown-has:hover > a,
.elementskit-submenu-panel li.active > a {
  background: var(--tdt-color-primary-subtle, #e6f4ee) !important;
  color: #008752 !important;
}

/* ---- 12. Header layout: logo left · nav page-centred · phone right ----- */
/* DESKTOP ONLY (>=1025px). Below this, ElementsKit shows the hamburger /
   off-canvas menu, so these rules MUST NOT apply — they were forcing the
   desktop nav visible on mobile (the empty-box bug). */
@media (min-width: 1025px) {
  .elementor-element-00b7b11 { flex-grow: 1 !important; }
  .elementor-element-00b7b11 .ekit-wid-con,
  .elementor-element-00b7b11 .elementskit-menu-container {
    width: 100% !important;
    position: relative !important;   /* positioning context for the phone */
  }
  /* Centre the links. The padding-right offsets the left logo's width so the
     links sit at true PAGE-centre. The nav is NOT positioned, so the phone
     anchors to the menu container (full width), not here. */
  .elementor-element-00b7b11 .elementskit-navbar-nav {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding-right: 280px !important;
  }
  /* Phone pinned to the far right of the header */
  .elementor-element-00b7b11 .tdt-phone-item {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* ---- 13. Blog / News cards (Elementor Posts widget, Cards skin) -------- */
.elementor-posts--skin-cards .elementor-post { display: flex !important; }
.elementor-posts--skin-cards .elementor-post__card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  border-radius: var(--tdt-radius-lg, 12px) !important;
  border: 1px solid var(--tdt-color-border, #dde0e1) !important;
  box-shadow: var(--tdt-shadow-sm, 0 1px 3px rgba(14,15,16,.10)) !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
/* Card body fills the remaining height so Read More can sit at the bottom */
.elementor-posts--skin-cards .elementor-post__text {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.elementor-posts--skin-cards .elementor-post__card:hover {
  box-shadow: var(--tdt-shadow-lg, 0 12px 28px rgba(14,15,16,.14)) !important;
  transform: translateY(-4px);
}
/* Category badge → brand green */
.elementor-posts--skin-cards .elementor-post__badge {
  background-color: #008752 !important;
  color: #ffffff !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
/* Title → brand display font; green on hover */
.elementor-posts--skin-cards .elementor-post__title,
.elementor-posts--skin-cards .elementor-post__title a {
  font-family: "Barlow Condensed", system-ui, sans-serif !important;
  color: #010524 !important;
  line-height: 1.15 !important;
}
.elementor-posts--skin-cards .elementor-post__title a:hover { color: #008752 !important; }
/* Body excerpt + meta → Barlow (the widget hard-codes "Sora") */
.elementor-posts--skin-cards .elementor-post__excerpt,
.elementor-posts--skin-cards .elementor-post__excerpt p {
  font-family: "Barlow", system-ui, sans-serif !important;
}
.elementor-posts--skin-cards .elementor-post__meta-data {
  font-family: "Barlow", system-ui, sans-serif !important;
  color: var(--tdt-color-text-muted, #626466) !important;
}
/* "Read More" → clean green text link (strip any button bg so no green block) */
.elementor-posts--skin-cards .elementor-post__read-more {
  margin-top: auto !important;   /* push to the bottom of the card, not under the paragraph */
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  color: #008752 !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.elementor-posts--skin-cards .elementor-post__read-more:hover { color: #00714a !important; text-decoration: underline !important; }

/* ---- 14. Branded banners: dark green->navy over the faded Hero ----------- */
/* The shared Hero.png is a deliberately faded white->ghost-photo gradient, so a
   CSS filter can't enrich it without dirtying the clean title area. Instead we lay
   a green->navy brand gradient over each banner (echoing the homepage hero) and
   flip the title + breadcrumb to white. The faded truck photo still reads faintly
   through the wash, giving depth. IDs: the 4 news single-post banners + the
   "Work at TDT" careers banner (7efa52c). Presentation-only (SEO-safe); all
   viewports (mobile-first). */
.elementor-element-e694c28,
.elementor-element-414fcfa,
.elementor-element-e33d388,
.elementor-element-52a3b3c,
.elementor-element-7efa52c {
  position: relative;
}
.elementor-element-e694c28::before,
.elementor-element-414fcfa::before,
.elementor-element-e33d388::before,
.elementor-element-52a3b3c::before,
.elementor-element-7efa52c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg,
    rgba(0, 40, 29, 0.94) 0%,
    rgba(0, 40, 29, 0.86) 42%,
    rgba(1, 5, 36, 0.62) 100%);
}
/* The truck sits low in Hero.png; with background-size:cover and no position set
   it was cropped off the bottom. Anchor the image to the bottom so more of the
   truck shows through the brand wash. */
.elementor-element-e694c28 .elementor-motion-effects-layer,
.elementor-element-414fcfa .elementor-motion-effects-layer,
.elementor-element-e33d388 .elementor-motion-effects-layer,
.elementor-element-52a3b3c .elementor-motion-effects-layer,
.elementor-element-7efa52c .elementor-motion-effects-layer,
.elementor-element-e694c28:not(.elementor-motion-effects-element-type-background),
.elementor-element-414fcfa:not(.elementor-motion-effects-element-type-background),
.elementor-element-e33d388:not(.elementor-motion-effects-element-type-background),
.elementor-element-52a3b3c:not(.elementor-motion-effects-element-type-background),
.elementor-element-7efa52c:not(.elementor-motion-effects-element-type-background) {
  background-position: center bottom !important;
}
/* keep the banner content (title + breadcrumb) above the overlay */
.elementor-element-e694c28 > .e-con-inner,
.elementor-element-414fcfa > .e-con-inner,
.elementor-element-e33d388 > .e-con-inner,
.elementor-element-52a3b3c > .e-con-inner,
.elementor-element-7efa52c > .e-con-inner {
  position: relative;
  z-index: 2;
}
/* flip the title (animated headline) + breadcrumb to white on the dark band */
.elementor-element-e694c28 .e-con-inner *,
.elementor-element-414fcfa .e-con-inner *,
.elementor-element-e33d388 .e-con-inner *,
.elementor-element-52a3b3c .e-con-inner *,
.elementor-element-7efa52c .e-con-inner * {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ---- 15. Single-post body: constrain + centre the content column --------- */
/* The post body containers already carry a sensible per-container --content-width
   (~822px on the 8-steps post), but the theme's `dreamslms-full-width-content`
   class pins each boxed inner hard LEFT, so body copy ran edge-to-edge with dead
   space on the right. Over-long line lengths hurt readability; restore a centred
   measure by honouring each container's own content-width and auto-margining it.
   Scope: single posts, boxed body containers only — the full-bleed banner
   (section 14) and any intentional full-width (e-con-full) bands are untouched.
   Presentation-only (SEO-safe); responsive-safe (on narrow screens the inner is
   already full width, so max-width clamps to 100% and auto margins collapse). */
body.single-post [data-elementor-type="wp-post"] .e-con.e-con-boxed:not(.elementor-element-e694c28):not(.elementor-element-414fcfa):not(.elementor-element-e33d388):not(.elementor-element-52a3b3c) > .e-con-inner {
  max-width: var(--content-width, 860px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Align the banner title + breadcrumb to the body column. The banner's own
   content-width is 1240px, but the body sits in an 822px centred column, so the
   hero text didn't line up with the copy below. Pin the banner inner to the same
   822px centred measure -> the title's left edge matches the body's left edge.
   The dark brand overlay stays full-bleed (it's on the container, not the inner). */
body.single-post .elementor-element-e694c28 > .e-con-inner,
body.single-post .elementor-element-414fcfa > .e-con-inner,
body.single-post .elementor-element-e33d388 > .e-con-inner,
body.single-post .elementor-element-52a3b3c > .e-con-inner {
  max-width: 822px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 16. Single-post body typography ------------------------------------- */
/* The body copy was the Elementor global grey (#7A7A7A) with no line-height and
   still hard-coded to "Sora", and widget font-sizes were inconsistent (16/14/13).
   That read washed-out and cramped. Set a proper article type scale on the post
   body: brand Barlow, a readable dark-slate colour, generous line-height, one
   consistent size, and a touch more space above headings so the steps breathe.
   Links keep their own colour (not targeted). Scope = single-post body widgets;
   the banner uses Animated-Headline (not text-editor/heading) so it's untouched.
   Presentation-only (SEO-safe); applies at all widths (mobile-first). */
body.single-post [data-elementor-type="wp-post"] .elementor-widget-text-editor,
body.single-post [data-elementor-type="wp-post"] .elementor-widget-text-editor p,
body.single-post [data-elementor-type="wp-post"] .elementor-widget-text-editor li {
  font-family: "Barlow", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #3a3d49 !important;
}
body.single-post [data-elementor-type="wp-post"] .elementor-widget-text-editor li {
  margin-bottom: 8px !important;
}
/* headings: brand condensed face only. (No extra margin here — the step headings
   sit inside containers with a green left accent bar; adding top margin pushed the
   text down out of line with the bar. Inter-widget spacing is handled below.) */
body.single-post [data-elementor-type="wp-post"] .elementor-widget-heading .elementor-heading-title {
  font-family: "Barlow Condensed", sans-serif !important;
}
/* Vertical spacing between body widgets is the column container's flex `gap`
   (Elementor's ~20px default), NOT widget margins -- so margin tweaks had no
   effect, which is why the Step heading kept floating above its paragraph. Drive
   the rhythm from the gap: a tight base so each "Step X:" heading hugs its
   paragraph, plus a small top margin on the Step rows to set them off as groups,
   and zero the legacy widget margins so nothing double-spaces. (rem; 1rem=16px.) */
body.single-post [data-elementor-type="wp-post"] .e-con.e-con-boxed:not(.elementor-element-e694c28):not(.elementor-element-414fcfa):not(.elementor-element-e33d388):not(.elementor-element-52a3b3c) > .e-con-inner {
  gap: 0.5rem !important;
  --gap: 0.5rem 0.5rem !important;
  --row-gap: 0.5rem !important;
}
body.single-post [data-elementor-type="wp-post"] .elementor-widget {
  margin-block-end: 0 !important;
}
body.single-post [data-elementor-type="wp-post"] .elementor-widget-text-editor p {
  margin-top: 0 !important;
}
/* a touch more space above each Step row than below it, so the heading groups
   visually with the paragraph it introduces rather than the one above */
body.single-post [data-elementor-type="wp-post"] .e-con-inner > .e-con {
  margin-top: 0.375rem !important;
}

/* ---- 17. Footer "Get In Touch" section (global footer #141) -------------- */
/* Branded & modern restyle of the global footer's Get In Touch block, matching the
   Elementor Pro "Footer Form" (#5893625 -> Planner API) to the TDT design-system
   form component. NOTE: the DS --tdt-* tokens are NOT used directly here -- <html>
   has no data-theme lock, so in an OS dark-mode browser the DS @media(dark) block
   flips/voids those tokens (which silently broke the borders + corners). We use the
   tokens' LIGHT-mode literal values instead (border #c3c8ca, surface #fff, text
   #1a1c1d, primary #008752 / hover #00714a, radius 8px, focus ring) so it always
   renders, identical to the DS form in light mode. CSS ONLY -- the form DOM, field
   names, reCAPTCHA and webhook are untouched, so Planner still works. Site-wide.
   Height: kills the forced min-height:80vh + 100px padding and compacts the form
   (the real row spacing was .elementor-field-group margin-bottom:24px). rem. */

/* --- height: drop the forced 80vh + heavy padding --- */
.elementor-element-f9f8af2 {
  --min-height: 0px !important;
  min-height: 0 !important;
  --padding-top: 2.5rem !important;
  --padding-bottom: 2.5rem !important;
}

/* --- the form card (rounded; the square corners were a voided var) --- */
.elementor-element-5893625 {
  border-radius: 0.5rem !important;
  box-shadow: 0 0.625rem 2.25rem rgba(1, 5, 36, 0.10) !important;
  padding: 1.25rem !important;
}
/* the real row spacing: was margin-bottom:24px on every field group -> compact */
.elementor-element-5893625 .elementor-field-group {
  margin-bottom: 0.55rem !important;
}
/* labels = DS .tdt-label (light values) */
.elementor-element-5893625 .elementor-field-label {
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #1a1c1d !important;
  margin-bottom: 0.3rem !important;
}
/* inputs / selects / textarea = DS .tdt-input (light values) */
.elementor-element-5893625 .elementor-field-textual {
  font-family: "Barlow", sans-serif !important;
  font-size: 1rem !important;
  color: #1a1c1d !important;
  background: #ffffff !important;
  border: 0.0625rem solid #c3c8ca !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 0.85rem !important;
  min-height: 0 !important;
  box-shadow: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.elementor-element-5893625 .elementor-field-textual::placeholder {
  color: #767c7e !important;
  opacity: 1 !important;
}
.elementor-element-5893625 .elementor-field-textual:focus {
  outline: none !important;
  border-color: #008752 !important;
  box-shadow: 0 0 0 0.1875rem rgba(31, 158, 104, 0.35) !important;
}
/* textarea = DS .tdt-textarea, compact for the footer */
.elementor-element-5893625 textarea.elementor-field-textual {
  min-height: 3.5rem !important;
  resize: vertical !important;
}
/* select = DS .tdt-select (own appearance + chevron) */
.elementor-element-5893625 select.elementor-field-textual {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626466' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  padding-right: 2.5rem !important;
}
/* submit = DS .tdt-btn (light values) */
.elementor-element-5893625 .elementor-button {
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  background: #008752 !important;
  color: #ffffff !important;
  border: 0.0625rem solid transparent !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1.35rem !important;
  letter-spacing: normal !important;
  transition: background 120ms ease, transform 120ms ease !important;
}
.elementor-element-5893625 .elementor-button:hover {
  background: #00714a !important;
}
.elementor-element-5893625 .elementor-button:active {
  transform: translateY(0.0625rem) !important;
}

/* --- locations --- */
/* names -> brand condensed display face, navy */
.elementor-element-f9f8af2 .elementor-heading-title,
.elementor-element-f9f8af2 strong,
.elementor-element-f9f8af2 b {
  font-family: "Barlow Condensed", sans-serif !important;
  color: #010524 !important;
}
/* compact the locations (tight lines within a location, modest gap between) */
.elementor-element-f9f8af2 .elementor-widget-text-editor p {
  margin-top: 0 !important;
  margin-bottom: 0.15rem !important;
}
.elementor-element-f9f8af2 .elementor-widget-text-editor {
  margin-block-end: 0.5rem !important;
}
/* phone + email links: brand green, bold, underline on hover */
.elementor-element-f9f8af2 a[href^="tel:"],
.elementor-element-f9f8af2 a[href^="mailto:"] {
  color: #008752 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 120ms ease !important;
}
.elementor-element-f9f8af2 a[href^="tel:"]:hover,
.elementor-element-f9f8af2 a[href^="mailto:"]:hover {
  color: #00714a !important;
  text-decoration: underline !important;
}

/* ---- 18. Lower footer: link columns + newsletter (global footer #141) ----- */
/* Brand the rest of the footer to match: column headings -> navy condensed,
   link lists -> slate with green hover, and the Mailchimp newsletter form mapped
   onto the DS form look (green Subscribe button, light rounded input). CSS ONLY --
   the Mailchimp form's action/fields are untouched, so it still posts to
   list-manage.com. DS light-mode literals (tokens void in OS dark mode). rem. */

/* column headings -> brand condensed display face, navy */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-family: "Barlow Condensed", sans-serif !important;
  color: #010524 !important;
}
/* link lists (icon-list) -> readable slate, brand-green hover */
.elementor-location-footer .elementor-icon-list-text {
  font-family: "Barlow", sans-serif !important;
  color: #3a3d49 !important;
  transition: color 120ms ease !important;
}
.elementor-location-footer .elementor-icon-list-item a:hover .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: #008752 !important;
}

/* --- Mailchimp newsletter form = DS form look --- */
.elementor-location-footer #mc_embed_signup input.email,
.elementor-location-footer #mc_embed_signup #mce-EMAIL {
  font-family: "Barlow", sans-serif !important;
  font-size: 1rem !important;
  color: #1a1c1d !important;
  background: #ffffff !important;
  border: 0.0625rem solid #c3c8ca !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 0.85rem !important;
  box-shadow: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.elementor-location-footer #mc_embed_signup input.email:focus,
.elementor-location-footer #mc_embed_signup #mce-EMAIL:focus {
  outline: none !important;
  border-color: #008752 !important;
  box-shadow: 0 0 0 0.1875rem rgba(31, 158, 104, 0.35) !important;
}
.elementor-location-footer #mc_embed_signup .mc-field-group > label,
.elementor-location-footer #mc_embed_signup label {
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #1a1c1d !important;
}
/* Subscribe button: black -> brand green (DS .tdt-btn look) */
.elementor-location-footer #mc-embedded-subscribe,
.elementor-location-footer #mc_embed_signup input.button {
  background: #008752 !important;
  color: #ffffff !important;
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: 0.0625rem solid transparent !important;
  border-radius: 0.5rem !important;
  padding: 0.7rem 1.5rem !important;
  height: auto !important;
  cursor: pointer !important;
  transition: background 120ms ease, transform 120ms ease !important;
}
.elementor-location-footer #mc-embedded-subscribe:hover,
.elementor-location-footer #mc_embed_signup input.button:hover {
  background: #00714a !important;
}
.elementor-location-footer #mc-embedded-subscribe:active,
.elementor-location-footer #mc_embed_signup input.button:active {
  transform: translateY(0.0625rem) !important;
}

/* ---- 19. Footer: brand-green social icons + centre the hard-left content -- */
/* (a) Social icons were each their platform colour -> unify to TDT green.
   (b) On wide screens the whole footer sat hard-left with dead space on the right
   because the theme's `dreamslms-full-width-content` pins boxed containers left
   (same bug fixed for the blog body in section 15). Centre the footer's boxed
   inners so the columns, accreditation row and newsletter sit balanced.
   Responsive-safe: on narrow screens the inner is full width so auto margins
   collapse to 0. Site-wide (global footer). */

/* (a) social icons -> TDT green */
.elementor-location-footer .elementor-social-icon {
  background-color: #008752 !important;
  transition: background-color 120ms ease !important;
}
.elementor-location-footer .elementor-social-icon:hover {
  background-color: #00714a !important;
}

/* (b) centre the footer's boxed content */
.elementor-location-footer .e-con.e-con-boxed > .e-con-inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 20. WP Job Manager job board ---------------------------------------- */
/* Brand the [jobs] board to match the DS: rounded DS-style filter inputs, listing
   "cards" with navy condensed titles + green job-type pills, and a green load-more
   button. Targets WPJM's own classes (.job_filters/.job_listings/.job_listing) so
   it styles the board wherever [jobs] renders, on any environment (no page-ID
   dependency -> promotes cleanly to staging/production). DS light-mode literals
   (tokens void in OS dark mode). rem; 1rem = 16px. */

/* --- filters --- */
.job_filters {
  background: #f4f6f8 !important;
  border: 0.0625rem solid #e4e7ec !important;
  border-radius: 0.75rem !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}
.job_filters .search_jobs label {
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #1a1c1d !important;
}
.job_filters input[type="text"],
.job_filters input.email,
.job_filters select {
  font-family: "Barlow", sans-serif !important;
  font-size: 1rem !important;
  color: #1a1c1d !important;
  background: #ffffff !important;
  border: 0.0625rem solid #c3c8ca !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 0.85rem !important;
  box-shadow: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.job_filters input[type="text"]:focus,
.job_filters select:focus {
  outline: none !important;
  border-color: #008752 !important;
  box-shadow: 0 0 0 0.1875rem rgba(31, 158, 104, 0.35) !important;
}
.job_filters .search_submit input[type="submit"],
.job_filters button[type="submit"] {
  background: #008752 !important;
  color: #ffffff !important;
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 1.35rem !important;
  cursor: pointer !important;
  transition: background 120ms ease !important;
}
.job_filters .search_submit input[type="submit"]:hover,
.job_filters button[type="submit"]:hover {
  background: #00714a !important;
}
.showing_jobs {
  font-family: "Barlow", sans-serif !important;
  color: #767c7e !important;
  border-bottom: none !important;
}

/* --- listing cards --- */
ul.job_listings {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul.job_listings li.job_listing,
ul.job_listings li.no_job_listings_found {
  background: #ffffff !important;
  border: 0.0625rem solid #e4e7ec !important;
  border-radius: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
  box-shadow: 0 0.0625rem 0.125rem rgba(1, 5, 36, 0.04) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease !important;
}
ul.job_listings li.job_listing:hover {
  border-color: #008752 !important;
  box-shadow: 0 0.375rem 1rem rgba(1, 5, 36, 0.10) !important;
  transform: translateY(-0.125rem) !important;
}
ul.job_listings li.job_listing a {
  padding: 1.1rem 1.25rem !important;
}
ul.job_listings li.job_listing .position h3 {
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #010524 !important;
  margin: 0 0 0.2rem 0 !important;
}
ul.job_listings li.job_listing .position .company {
  font-family: "Barlow", sans-serif !important;
  color: #3a3d49 !important;
}
ul.job_listings li.job_listing .position .company strong,
ul.job_listings li.job_listing .position .company .company_name {
  font-weight: 600 !important;
  color: #3a3d49 !important;
}
ul.job_listings li.job_listing .location {
  font-family: "Barlow", sans-serif !important;
  color: #767c7e !important;
}
/* job-type pill -> brand green (board cards AND the single job page, which used
   WP Job Manager's default lime green for full-time) */
ul.job_listings li.job_listing ul.meta li.job-type,
.job-listing-meta li.job-type,
.single_job_listing li.job-type {
  background: #008752 !important;
  color: #ffffff !important;
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  border-radius: 1rem !important;
  padding: 0.15rem 0.7rem !important;
}
ul.job_listings li.job_listing ul.meta li.date {
  font-family: "Barlow", sans-serif !important;
  color: #767c7e !important;
}

/* --- load more --- */
a.load_more_jobs {
  display: inline-block !important;
  background: #008752 !important;
  color: #ffffff !important;
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  border: 0.0625rem solid transparent !important;
  border-radius: 0.5rem !important;
  padding: 0.7rem 1.5rem !important;
  margin-top: 0.5rem !important;
  transition: background 120ms ease !important;
}
a.load_more_jobs:hover {
  background: #00714a !important;
}

/* --- job-type filter checkboxes: tidy to Barlow + green ticks --- */
.job_filters ul.job_types {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem 1.1rem !important;
  list-style: none !important;
  margin: 0.6rem 0 0 0 !important;
  padding: 0 !important;
  border: none !important;
}
.job_filters ul.job_types li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.job_filters ul.job_types label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  color: #3a3d49 !important;
  cursor: pointer !important;
}
.job_filters ul.job_types input[type="checkbox"] {
  accent-color: #008752 !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
}

/* --- centre the careers page content (was pinned hard-left by the theme) ---
   Scoped via :has(.job_listings) to the page holding the WPJM board, so it works
   on any environment regardless of the page's ID (promotes cleanly). Boxed
   containers only; full-width sections and the header/footer are untouched. */
body:has(.job_listings) [data-elementor-type="wp-page"] .e-con.e-con-boxed > .e-con-inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- single job page: hide the empty company box (TDT's own site, redundant) --- */
.single_job_listing .company,
body.single-job_listing .company {
  display: none !important;
}
/* on-brand typography for the on-page position description */
.single_job_listing h3,
.single_job_listing h4 {
  font-family: "Barlow Condensed", sans-serif !important;
  color: #010524 !important;
  margin: 1.4rem 0 0.5rem 0 !important;
}
.single_job_listing h4 { font-size: 1.15rem !important; }
.single_job_listing p,
.single_job_listing li {
  font-family: "Barlow", sans-serif !important;
  color: #3a3d49 !important;
  line-height: 1.7 !important;
}
/* PD download link -> green DS button */
a.tdt-pd-download {
  display: inline-block !important;
  background: #008752 !important;
  color: #ffffff !important;
  font-family: "Barlow", sans-serif !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 0.5rem !important;
  padding: 0.7rem 1.35rem !important;
  margin-top: 0.5rem !important;
  transition: background 120ms ease !important;
}
a.tdt-pd-download:hover {
  background: #00714a !important;
  color: #ffffff !important;
}

/* --- single job page: strip the theme's blog chrome (it's a job, not a post) ---
   Scoped to body.single-job_listing so real blog posts keep their meta + sidebar. */
body.single-job_listing .blog-info,
body.single-job_listing .sidebar-right,
body.single-job_listing #comments,
body.single-job_listing .comments-area,
body.single-job_listing .comment-respond,
body.single-job_listing .post-navigation,
body.single-job_listing .nav-links {
  display: none !important;
}
/* widen the content now that the sidebar is hidden */
body.single-job_listing .col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   HOME PAGE REFRESH (page 42) — design-led polish, 2026-06-29
   BlaBlaCar-inspired: airy spacing, framed photos, soft rounded cards.
   CSS-only (no Elementor/DB changes). DS light-mode literals (tokens void in
   OS dark mode). rem; 1rem = 16px. Sections 21+.
   ========================================================================== */

/* ---- 21. Global body typography → Barlow -------------------------------- */
/* The DreamsLMS parent theme forces body copy to "Inter"; the brand body face
   is Barlow. Map running text to Barlow WITHOUT touching headings (Barlow
   Condensed, handled in §3) or icon fonts (FontAwesome / ElementsKit / Tutor).
   Scoped to text-bearing elements so icon glyphs keep their own font-family. */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor td,
.elementor-widget-icon-box .elementor-icon-box-content,
.elementor-widget-image-box .elementor-image-box-content,
p, li, blockquote, label, input, select, textarea {
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
}
/* Icon-list text (e.g. the "TDT Australia:" feature list on the Company Profile
   page) was left in the old "Sora" face by a per-widget typography setting.
   !important to override that per-element Elementor CSS. */
.elementor-icon-list-text {
  font-family: "Barlow", system-ui, -apple-system, sans-serif !important;
}

/* ---- 22. Home: frame the over-sized full-width photos -------------------- */
/* The team/portrait photos render edge-to-edge and absurdly tall (the trainers
   group shot was ~1354px high), swallowing a whole viewport. Reframe them as
   tidy DS cards: capped height, rounded corners, soft shadow, faces-first crop.
   Targeted by widget id (0482e23 = trainers group · 492e718 = portrait) so the
   page's many decorative 1px line/divider images and the header logo are all
   left untouched. */
.elementor-element-0482e23 img,
.elementor-element-492e718 img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 26rem !important;
  object-fit: cover !important;
  object-position: center 30% !important;   /* bias toward faces, not boots */
  border-radius: var(--tdt-radius-lg, 0.75rem) !important;
  box-shadow: 0 0.625rem 1.75rem rgba(1, 5, 36, 0.12) !important;
}

/* ---- 23. Home: tighten the "Truck Licences Training" intro band ---------- */
/* The two-column intro (heading | copy) carried a big forced min-height + heavy
   block padding, leaving a dead gap under the heading. Compact it to a calm
   rhythm and vertically centre the columns so heading and copy align. */
.elementor-element-09c2a6a {
  --min-height: 0 !important;
  min-height: 0 !important;
  --padding-top: 3.5rem !important;
  --padding-bottom: 3.5rem !important;
  /* The original build set padding-left:100px but padding-right:0, which shoved
     the full-width trainers photo off to the right. Make the horizontal padding
     symmetric (and responsive) so the photo + content centre cleanly. */
  --padding-left: clamp(1.25rem, 5vw, 6.25rem) !important;
  --padding-right: clamp(1.25rem, 5vw, 6.25rem) !important;
  align-items: center !important;
}
.elementor-element-09c2a6a > .e-con-inner { align-items: center !important; }

/* ---- 25. Home: round the "Our Expertise" photo tiles -------------------- */
/* The six dark photo tiles (Transport · Mining · Agriculture · Civil ·
   Warehousing · All Courses) had hard square corners, clashing with the now-
   rounded hero/photo framing. Round + clip them and add a soft shadow + hover
   lift so they read as cohesive DS cards. Targeted by tile id so the full-width
   "Type of Course Available" band (9da98e2) is left flush. */
.elementor-element-9bed82f,
.elementor-element-c297dc9,
.elementor-element-3366143,
.elementor-element-9ed3217,
.elementor-element-ed393fa,
.elementor-element-9676aa6 {
  border-radius: var(--tdt-radius-lg, 0.75rem) !important;
  overflow: hidden !important;
  box-shadow: 0 0.375rem 1.25rem rgba(1, 5, 36, 0.14) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.elementor-element-9bed82f:hover,
.elementor-element-c297dc9:hover,
.elementor-element-3366143:hover,
.elementor-element-9ed3217:hover,
.elementor-element-ed393fa:hover,
.elementor-element-9676aa6:hover {
  transform: translateY(-0.25rem) !important;
  box-shadow: 0 0.875rem 2rem rgba(1, 5, 36, 0.22) !important;
}

/* ---- 26. Home: testimonials ("Don't just take our word for it") --------- */
/* The customer quotes sat as plain text on white with no separation. Set the
   whole band apart as a soft brand-tinted "social proof" section and give the
   quotes a relaxed, readable measure. Typography + section background only — the
   carousel markup/JS is untouched, so the slider keeps working. */
.elementor-element-dc33153 {
  background-color: #f4f7f5 !important;   /* light brand tint */
}
/* quote body copy: relaxed and readable */
.elementor-element-dc33153 .elementor-widget-text-editor,
.elementor-element-dc33153 .elementor-widget-text-editor p {
  font-family: "Barlow", sans-serif !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  color: #3a3d49 !important;
}
/* names / company → brand display face */
.elementor-element-dc33153 .elementor-heading-title strong,
.elementor-element-dc33153 .elementor-widget-text-editor strong,
.elementor-element-dc33153 .elementor-widget-text-editor b {
  font-family: "Barlow Condensed", sans-serif !important;
  color: #010524 !important;
  font-weight: 600 !important;
}
/* carousel arrows → brand green (best-effort across the custom arrow markup) */
.elementor-element-dc33153 .arrow_custom,
.elementor-element-dc33153 .arrow_custom svg,
.elementor-element-dc33153 .arrow_custom i,
.elementor-element-dc33153 [class*="swiper-button"] {
  color: #008752 !important;
  border-color: #008752 !important;
}
/* The testimonials content row carried padding-left:100px but padding-right:0,
   so the photo in the right column ran past the content edge into the page
   margin. Balance the horizontal padding (responsive) so the image is held in
   with an equal margin, matching the review card on the left. */
.elementor-element-ea5af5e {
  --padding-left: clamp(1.25rem, 5vw, 6.25rem) !important;
  --padding-right: clamp(1.25rem, 5vw, 6.25rem) !important;
}

/* review cards: the white quote items had zero padding, so the stars/quote/name
   pressed against the edges. Give them breathing room + a tidy card finish so
   they read cleanly on the tinted band. */
.elementor-element-dc33153 .uc_quote_item {
  padding: 1.75rem 2rem !important;
  border-radius: var(--tdt-radius-lg, 0.75rem) !important;
  box-shadow: 0 0.25rem 1rem rgba(1, 5, 36, 0.08) !important;
  border: 0.0625rem solid #e8ebee !important;
}

/* ---- 27. Trustindex hero readability (reinforce §9) --------------------- */
/* §9 whitens the hero Trustindex summary; this hardens it across the widget's
   markup variants AND guarantees every review card (incl. the AI "Review
   summary" card) keeps a solid white inner with dark text — so nothing in the
   widget can render dark-on-dark over the hero photo. The summary block lives
   OUTSIDE .ti-inner, so whitening it never touches the on-white card text. */
.elementor-element-309f7dc .ti-widget .ti-header,
.elementor-element-309f7dc .ti-widget .ti-header *,
.elementor-element-309f7dc .ti-widget .ti-footer,
.elementor-element-309f7dc .ti-widget .ti-footer *,
.elementor-element-309f7dc .ti-widget .ti-rating,
.elementor-element-309f7dc .ti-widget .ti-rating-text,
.elementor-element-309f7dc .ti-widget .ti-rating-text * {
  color: #ffffff !important;
}
/* review cards: solid white inner + dark text (readable on white) */
.elementor-element-309f7dc .ti-widget .ti-review-item .ti-inner {
  background: #ffffff !important;
}
.elementor-element-309f7dc .ti-widget .ti-review-item .ti-inner,
.elementor-element-309f7dc .ti-widget .ti-review-item .ti-inner .ti-name,
.elementor-element-309f7dc .ti-widget .ti-review-item .ti-inner .ti-date,
.elementor-element-309f7dc .ti-widget .ti-review-item .ti-inner .ti-review-content,
.elementor-element-309f7dc .ti-widget .ti-review-item .ti-inner .ti-read-more {
  color: #1a1c1d !important;
}
/* The Trustindex "powered by" wordmark under the summary is a grey logo IMAGE
   (logo.svg: a green verified-check badge + grey "Trustindex" type), so `color`
   can't touch it — it read grey-on-dark. Brighten it so the wordmark is legible
   while KEEPING the green check badge (a flat white knock-out hid the tick).
   Scoped to the hero ONLY; the same logo on light surfaces stays as-is. */
.elementor-element-309f7dc .ti-footer .ti-logo-fb,
.elementor-element-309f7dc .ti-large-logo .ti-logo-fb {
  filter: brightness(1.85) contrast(1.05) !important;
  opacity: 1 !important;
}

/* ---- 28. Tutor course archive / results page --------------------------- */
/* (a) Grid / List view toggle: the active button was off-brand coral
   (rgb(255,101,117)) — recolour to brand green; keep the inactive one clean. */
.view-icons a.active,
.view-icons .nav-link.active {
  background-color: #008752 !important;
  border-color: #008752 !important;
  color: #ffffff !important;
}
.view-icons a.active .fe,
.view-icons a.active i { color: #ffffff !important; }
.view-icons a:not(.active) {
  background-color: #ffffff !important;
  border-color: #c3c8ca !important;
  color: #626466 !important;
}
.view-icons a:not(.active):hover {
  border-color: #008752 !important;
  color: #008752 !important;
}

/* (b) Hide the always-"0 Lessons" block on the cards — icon + text (these are
   licence/booking courses, not lesson-based, so Tutor always shows 0). The
   ".rating-img" block holds only the lesson icon + "0 Lessons"; the duration
   ("48 hours") sits in separate sibling spans and is kept. */
.tutor-course-card .rating-img { display: none !important; }

/* (c) Hide the empty grey star ratings (no Tutor reviews exist, so every card
   shows 5 blank stars — looks unfinished). */
.tutor-course-card .rating { display: none !important; }

/* (d) "Search results for ..." heading injected by custom.js on ?s= searches. */
.tdt-search-heading {
  font-family: "Barlow Condensed", system-ui, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: #010524 !important;
  line-height: 1.15 !important;
  margin: 0 0 1.25rem 0 !important;
}

/* (e) Double border fix. The card is triple-nested: .tutor-card (outer) >
   .course-box.card (theme card) > .product (inner). Skin §10 added a border+shadow
   to BOTH the outer .tutor-card AND the inner .product, so with the theme's own
   .course-box border you saw a double/triple outline. Collapse to ONE card:
   make the outer wrapper + the inner .product borderless, and let
   .course-box.card be the single bordered, rounded, shadowed card. */
.tutor-course-card.tutor-card {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.tutor-course-card .product {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.tutor-course-card .course-box.card {
  border: 1px solid #dde0e1 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(14, 15, 16, 0.10) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.tutor-course-card .course-box.card:hover {
  box-shadow: 0 12px 28px rgba(14, 15, 16, 0.14) !important;
  transform: translateY(-4px);
}

/* (f) Equal-height cards: stretch every card to its row's tallest, let the inner
   boxes fill the height, and pin the "View Course" button to the bottom so cards
   with/without a duration line still align. */
.tutor-courses-loop-wrap { align-items: stretch !important; }
.tutor-course-card.tutor-card { height: auto !important; }
.tutor-course-card .course-box.card,
.tutor-course-card .product {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
}
.tutor-course-card .all-btn { margin-top: auto !important; }

/* ---- 30. Meet Our Team page (6706): clean uniform team grid ------------- */
/* The ElementsKit team cards had wildly inconsistent photos — mixed square /
   portrait sizes (125px–225px) and several used object-fit:fill (distorted).
   Normalise every photo to one circular avatar (cover, faces-first), give the
   name + role consistent brand type, centre everything, add a subtle hover.
   Photo + name + role only. Scoped to the Meet Our Team page. */
.elementor-page-6706 .profile-card { text-align: center !important; }
.elementor-page-6706 .profile-card .ekit-team-img,
.elementor-page-6706 .profile-card .profile-header {
  display: flex !important;
  justify-content: center !important;
  height: auto !important;
}
.elementor-page-6706 .profile-card .ekit-team-img img,
.elementor-page-6706 .profile-card .profile-header img {
  width: 11rem !important;
  height: 11rem !important;
  max-width: 11rem !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center 25% !important;   /* favour the face */
  border: 0.25rem solid #ffffff !important;
  box-shadow: 0 0.375rem 1rem rgba(1, 5, 36, 0.12) !important;
  background: #eef0f0 !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.elementor-page-6706 .profile-card:hover .ekit-team-img img,
.elementor-page-6706 .profile-card:hover .profile-header img {
  transform: scale(1.05) !important;
  box-shadow: 0 0.75rem 1.5rem rgba(1, 5, 36, 0.20) !important;
}
.elementor-page-6706 .profile-card .profile-title,
.elementor-page-6706 .profile-card .profile-title a {
  font-family: "Barlow Condensed", sans-serif !important;
  color: #010524 !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin-top: 1rem !important;
  text-decoration: none !important;
}
.elementor-page-6706 .profile-card .profile-designation {
  font-family: "Barlow", sans-serif !important;
  color: #008752 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  margin-top: 0.25rem !important;
}