/*
 Theme Name:     Emphasis 
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Rebuild of and redesign of Emphasis website from July 2025
 Author:         Cawood.io
 Author URI:     https://cawood.io
 Template:       Divi
 Version:        2.0.0
 Last deployed:  2026-06-10
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Lazy rendering for below-the-fold sections — mobile only.
   Add the class "cv-auto" to a Divi Section/Row (Advanced → CSS Class) and the
   browser skips its style/layout/paint work until the user scrolls near it.
   Content stays in the DOM and fully interactive — only use on sections that
   are never visible in the initial viewport. Desktop is excluded: it has the
   bandwidth/CPU to render everything up front, and the reserved-height
   placeholder was disturbing desktop layout. */
@media (max-width: 980px) {
    .cv-auto {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }
}

/* Fix: Divi 5 dropdown canvas headers must sit above page body content.
   Canvas dropdowns and body columns both resolve to z-index:2 in the root
   stacking context; since body content is later in the DOM it paints on top.
   Raising canvas inner-content to 1000 ensures dropdowns always appear above page content. */
header.et-l--header[data-canvas] .et_builder_inner_content {
    z-index: 100000 !important;
}

/* Github commit test */

/* Mobile Styles */
@media (max-width: 980px) {
    .et_animated {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Quick questions styles */
.quick-questions {
    max-width: 1440px;
    margin: 40px 0;
}

.quick-question-item {
    border-bottom: 1px solid #ddd;
}

/* QUESTION */
.quick-questions .quick-question-toggle {
    all: unset; 
    display: flex;
    width: 100%;
    padding: 20px 0;
    cursor: pointer;
	color: #19a4de;
    font-size: 18px;
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

/* ICON */
.quick-question-toggle .icon {
    font-size: 20px;
    transition: transform 0.25s ease;
}

/* rotate icon when open */
.quick-question-item.open .icon {
    transform: rotate(45deg);
}

/* ANSWER (collapsed) */
.quick-question-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* ANSWER (expanded) */
.quick-question-item.open .quick-question-answer {
    max-height: 500px; /* safe max height */
    padding-bottom: 20px;
    margin-top: -10px;
    color: #666;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------
   WebKit rendering fallbacks — homepage header logo + trainer carousel
   The Theme Builder header/body layouts rely on behaviours only Blink has;
   these overrides reproduce the intended (Chrome) rendering in Safari/iOS.
   Divi breakpoints: phone ≤767px, tablet 768–980px, desktop ≥981px.
   NB: the _tb_ class indexes below are generated from the Theme Builder
   layouts — re-check them if the header/homepage layouts are restructured.
----------------------------------------------------------------------- */

/* Header logo (desktop breakpoint only — the builder sets the logo column
   to width:5%, clamps the img to ~52px via max-width:100%, then relies on
   overflow:visible painting the full image outside its box. Blink supports
   overflow on replaced elements; WebKit clips to the box and shows a
   sliver of the icon. Lifting max-width lets the img box take its natural
   88px-tall/auto width, which overflows the column as ordinary box
   overflow — supported everywhere. object-fit:contain is belt-and-braces
   so the logo can never be cropped even if its box is ever clamped. */
@media (min-width: 981px) {
    #page-container .et_pb_image_0_tb_header .et_pb_image_wrap,
    #page-container .et_pb_image_0_tb_header .et_pb_image_wrap img {
        max-width: none;
    }
    #page-container .et_pb_image_0_tb_header .et_pb_image_wrap img {
        object-fit: contain;
    }
}

/* Trainer carousel slides-per-view. The responsive settings (6 desktop /
   4 tablet / 2 phone; second carousel 2 desktop / 1 phone) are applied by
   Divi's multiview JS, which WP Rocket Delay JS holds until first touch —
   until then phones render the baked-in desktop class (6 slivers across).
   These mirror Divi's own slides_N flex values per breakpoint; once the JS
   swaps the class the fallback selector stops matching and Divi's rule
   takes over with identical values. */
@media (min-width: 768px) and (max-width: 980px) {
    #page-container .et_pb_group_carousel_0_tb_body.et_pb_group_carousel_slides_6 .et_pb_group,
    #page-container .et_pb_group_carousel_0_tb_body.et_pb_group_carousel_slides_6 .et_pb_group_carousel_slide {
        flex: 0 0 25%;
    }
}

@media (max-width: 767px) {
    #page-container .et_pb_group_carousel_0_tb_body.et_pb_group_carousel_slides_6 .et_pb_group,
    #page-container .et_pb_group_carousel_0_tb_body.et_pb_group_carousel_slides_6 .et_pb_group_carousel_slide {
        flex: 0 0 50%;
    }

    #page-container .et_pb_group_carousel_1_tb_body.et_pb_group_carousel_slides_2 .et_pb_group,
    #page-container .et_pb_group_carousel_1_tb_body.et_pb_group_carousel_slides_2 .et_pb_group_carousel_slide {
        flex: 0 0 100%;
    }
}

/* Trainer photos: the builder rule sets width:auto on the img, so its
   width tracks the natural size of the current source — while lazyload
   still holds the 1×1 placeholder GIF, WebKit collapses the img to <1px
   (Blink falls back to the wrap's width). Restore Divi's width:100% so
   placeholder and loaded image occupy the same box in every engine;
   height/aspect-ratio/object-fit from the existing rules are unchanged. */
#page-container .et_pb_group_carousel_0_tb_body .et_pb_image .et_pb_image_wrap img {
    width: 100%;
}

/* Group-carousel structural fallback. The carousel's entire layout (flex
   track + slides_N widths) ships only in Divi's regenerable dynamic CSS —
   the divi-dynamic-critical-inline-css block and/or the deferred
   et-core-unified-*.css in et-cache. After a cache clear the regenerated
   critical/deferred split can strand the carousel rules in a stylesheet
   that 404s or loads late, collapsing slides to stacked full-width cards
   (seen repeatedly on /courses/, slides_5). These are verbatim copies of
   Divi's own rules at identical specificity, so when Divi's CSS is present
   the computed styles are unchanged — but ties against the inline critical
   block resolve in THIS file's favour (it loads first), so if a Divi update
   ever changes these values, refresh the copies here. Deliberately NOT
   #page-container-scoped so the breakpoint overrides above keep winning. */
.et_pb_group_carousel {
    position: relative;
    display: flex;
    flex-direction: column;
}
.et_pb_group_carousel_container {
    position: relative;
    overflow: clip visible;
}
.et_pb_group_carousel_track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.et_pb_group_carousel .et_pb_group_carousel_slide {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
}
.et_pb_group_carousel.et_pb_group_carousel_slides_2 .et_pb_group,
.et_pb_group_carousel.et_pb_group_carousel_slides_2 .et_pb_group_carousel_slide {
    flex: 0 0 50%;
}
.et_pb_group_carousel.et_pb_group_carousel_slides_3 .et_pb_group,
.et_pb_group_carousel.et_pb_group_carousel_slides_3 .et_pb_group_carousel_slide {
    flex: 0 0 33.333%;
}
.et_pb_group_carousel.et_pb_group_carousel_slides_4 .et_pb_group,
.et_pb_group_carousel.et_pb_group_carousel_slides_4 .et_pb_group_carousel_slide {
    flex: 0 0 25%;
}
.et_pb_group_carousel.et_pb_group_carousel_slides_5 .et_pb_group,
.et_pb_group_carousel.et_pb_group_carousel_slides_5 .et_pb_group_carousel_slide {
    flex: 0 0 20%;
}
.et_pb_group_carousel.et_pb_group_carousel_slides_6 .et_pb_group,
.et_pb_group_carousel.et_pb_group_carousel_slides_6 .et_pb_group_carousel_slide {
    flex: 0 0 16.667%;
}

/* Search results filter bar */
.search-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.search-type-filter__btn {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 2px solid currentColor;
    transition: background 0.15s ease, color 0.15s ease;
}

.search-type-filter__btn:hover,
.search-type-filter__btn.is-active {
    color: #fff !important;
}

/* All button */
.search-type-filter__btn:first-child                  { color: #555; }
.search-type-filter__btn:first-child:hover,
.search-type-filter__btn:first-child.is-active        { background: #555; }

/* Per-type colours — mirror the badge palette */
.search-type-filter__btn--post         { color: #19a4de; }
.search-type-filter__btn--courses      { color: #fab500; }
.search-type-filter__btn--case-studies { color: #118abd; }
.search-type-filter__btn--services     { color: #2fb2e9; }
.search-type-filter__btn--our-people   { color: #5b8fa8; }
.search-type-filter__btn--resources    { color: #3a9e8f; }
.search-type-filter__btn--page         { color: #ababab; }

.search-type-filter__btn--post:hover,
.search-type-filter__btn--post.is-active         { background: #19a4de; }
.search-type-filter__btn--courses:hover,
.search-type-filter__btn--courses.is-active      { background: #fab500; }
.search-type-filter__btn--case-studies:hover,
.search-type-filter__btn--case-studies.is-active { background: #118abd; }
.search-type-filter__btn--services:hover,
.search-type-filter__btn--services.is-active     { background: #2fb2e9; }
.search-type-filter__btn--our-people:hover,
.search-type-filter__btn--our-people.is-active   { background: #5b8fa8; }
.search-type-filter__btn--resources:hover,
.search-type-filter__btn--resources.is-active    { background: #3a9e8f; }
.search-type-filter__btn--page:hover,
.search-type-filter__btn--page.is-active         { background: #ababab; }

/* Search result post type badges */
.post-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: #ababab;
    vertical-align: middle;
    line-height: 1.8;
}

.post-type-badge--post         { background: #19a4de; }
.post-type-badge--courses      { background: #fab500; color: #fff; }
.post-type-badge--case-studies { background: #118abd; }
.post-type-badge--services     { background: #2fb2e9; }
.post-type-badge--our-people   { background: #5b8fa8; }
.post-type-badge--resources    { background: #3a9e8f; }
.post-type-badge--page         { background: #ababab; }

/* -----------------------------------------------------------------------
   Course filter sidebar
----------------------------------------------------------------------- */

.course-filter-ui {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.course-filter-group {
    border: none;
    margin: 0;
    padding: 0;
}

/* Search box sits outside the collapsible pattern */
.course-filter-group:first-child {
    margin-bottom: 12px;
}

.course-filter-group__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #333;
    margin-bottom: 10px;
}

/* Search input */
.course-filter__search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.course-filter__search:focus {
    outline: none;
    border-color: #fab500;
}

/* Collapsible group toggle button */
.course-filter-group--collapsible {
    border-top: 1px solid #eee;
}

.course-filter-group__toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
}

.course-filter-group__toggle:hover {
    color: #fab500;
}

/* Chevron arrow */
.course-filter-group__chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: -3px;
}

.course-filter-group__toggle[aria-expanded="true"] .course-filter-group__chevron {
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* Collapsible body */
.course-filter-group__body {
    display: none;
    padding-bottom: 12px;
}

.course-filter-group__body.is-open {
    display: block;
}

/* Option rows (radio + checkbox) */
.course-filter__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    line-height: 1.4;
}

.course-filter__option input[type="radio"],
.course-filter__option input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #fab500;
    cursor: pointer;
    margin: 0;
}

.course-filter__option:hover span {
    color: #fab500;
}

.course-filter__option--toggle {
    font-weight: 600;
    color: #333;
}

/* No results message */
.course-filter__no-results {
    font-size: 14px;
    color: #888;
    margin: 8px 0 0;
}

/* Reset button */
.course-filter__reset {
    align-self: flex-start;
    background: transparent;
    border: 2px solid #fab500;
    color: #fab500;
    border-radius: 3px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.course-filter__reset:hover {
    background: #fab500;
    color: #fff;
}

/* Sticky filter column — only while the columns sit side by side.
   On phone Divi stacks the columns and forces position back to relative,
   so the top offset would shove the sidebar over the results meta bar. */
@media (min-width: 768px) {
    .course-filter-col--sticky {
        position: sticky;
        top: 80px;
        align-self: flex-start;
    }
}

/* -----------------------------------------------------------------------
   Case study sector filter
----------------------------------------------------------------------- */

.cs-sector-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cs-sector-filter__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #333;
}

.cs-sector-filter__select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    color: #333;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cs-sector-filter__select:focus {
    outline: none;
    border-color: #fab500;
}

.cs-sector-filter__no-results {
    font-size: 14px;
    color: #666;
    width: 100%;
}

/* Results meta bar — count + chips */
#cf-results-meta {
    margin-bottom: 16px;
}

#cf-count {
    font-size: 13px;
    color: #888;
    margin: 0 0 10px;
}

/* Active filter chips */
#cf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fff7e0;
    border: 1px solid #fab500;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cf-chip:hover {
    background: #fab500;
    color: #fff;
}

.cf-chip__remove {
    font-size: 15px;
    line-height: 1;
    opacity: 0.6;
}

.cf-chip:hover .cf-chip__remove {
    opacity: 1;
}