/* ------------------------------------------------------------------
   Certify Upskill - theme CSS lifted from the live Arlo site
   Paste into: Arlo > Settings > Custom CSS
   Every selector prefixed with .arlo#arlo to beat the bundled theme.
   Checkout/application-form and site-chrome rules were dropped -
   checkout is styled in Arlo, header/footer by your WordPress theme.
   ------------------------------------------------------------------ */

.arlo#arlo .catalogue-item .template-details,
.arlo#arlo .online-activity-item .template-details {
    border-color: #323F48;
}

.arlo#arlo .event-card .card-back .btn-cons.text-primary,
.arlo#arlo .package-card .card-back .btn-cons.text-primary {
    color: #323F48;
}

.arlo#arlo .arlo-facet-container,
.arlo#arlo .text-primary {
    color: rgb(71,84,93) !important;
}

.arlo#arlo .btn-secondary-alt,
.arlo#arlo .btn-secondary-alt:focus,
.arlo#arlo .btn-secondary-alt.hover,
.arlo#arlo .btn-secondary-alt:hover,
.arlo#arlo .btn-secondary-alt.active,
.arlo#arlo .btn-secondary-alt:active,
.arlo#arlo .btn-secondary-alt.active:focus,
.arlo#arlo .btn-secondary-alt:active:focus,
.arlo#arlo .btn-secondary-alt:active:hover,
.arlo#arlo .btn-expand,
.arlo#arlo .btn-expand:hover,
.arlo#arlo .btn-expand:active,
.arlo#arlo .btn-expand:focus {
    color: #03799A;
}

.arlo#arlo .secondary-text,
.arlo#arlo .text-secondary,
.arlo#arlo .selectize-control.single.applied .selectize-input:after {
    color: #03799A !important;
}

.arlo#arlo .dropdown-circle {
    background: #03799A;
}

.arlo#arlo a:hover,
.arlo#arlo .name a:hover,
.arlo#arlo .open .dropdown-toggle.btn-secondary-alt {
    color: rgb(0,77,107);
}

.arlo#arlo .link-item:hover h5 {
    color: rgb(0,77,107) !important;
}

.arlo#arlo .search-item .name a.text-primary-dark {
    color: #626262 !important;
}

.arlo#arlo section.headline h1 {
    color: #ffffff !important;
}

.arlo#arlo .banner {
    color: #ffffff !important;
}

.arlo#arlo .package-card .card-back .btn-cons.text-primary,
.arlo#arlo .package-card .card-back .btn-cons.btn-bordered:hover,
.arlo#arlo .event-card .card-back .btn-cons.text-primary,
.arlo#arlo .event-card .card-back .btn-cons.btn-bordered:hover {
    background-color: #ffffff
        color: #323F48 !important;
}

.arlo#arlo .package-card .card-back .btn-cons.text-primary,
.arlo#arlo .package-card .card-back .btn-cons.btn-bordered,
.arlo#arlo .event-card .card-back .btn-cons.text-primary,
.arlo#arlo .event-card .card-back .btn-cons.btn-bordered {
    border-color: #ffffff;
}

.arlo#arlo .checkbox-filter input[type='checkbox']:checked + input + label,
.arlo#arlo .radio-filter input[type='checkbox']:checked + input + label,
.arlo#arlo .checkbox-filter input[type='checkbox']:checked + label,
.arlo#arlo .radio-filter input[type='checkbox']:checked + label,
.arlo#arlo .checkbox-filter input[type='radio']:checked + input + label,
.arlo#arlo .radio-filter input[type='radio']:checked + input + label,
.arlo#arlo .checkbox-filter input[type='radio']:checked + label,
.arlo#arlo .radio-filter input[type='radio']:checked + label {
    color: #FFFFFF;
}

.arlo#arlo .open .dropdown-toggle.btn-menu {
    color: #F9F9F9 !important;
}

.arlo#arlo .open .dropdown-toggle.btn-menu {
    background-color: #03799A
        border-color: #03799A;
}

.arlo#arlo .website-button {
    background-color: #03799A !important
        color: #FFFFFF !important
        border: 0 !important;
}

.arlo#arlo .search-item .name a.text-primary-dark:hover {
    color: #03799A !important;
}

.arlo#arlo .selectize-dropdown.single {
    background-color: white !important;
}

.arlo#arlo .selectize-control.single.applied .selectize-input,
.arlo#arlo .selectize-control.single.applied .selectize-input:hover {
    color: #FFFFFF;
}

.arlo#arlo .selectize-control.single:not(.no-bg) .selectize-input:after {
    color: #FFFFFF !important;
}

.arlo#arlo .dropdown-circle i {
    color: #FFFFFF;
}

.arlo#arlo .selectize-control.single.applied .selectize-input:after {
    background: #FFFFFF;
}

.arlo#arlo .btn-secondary.bg-complete,
.arlo#arlo .btn-secondary.bg-complete:hover,
.arlo#arlo .btn-secondary.bg-complete:active,
.arlo#arlo .btn-secondary.bg-complete:focus,
.arlo#arlo .btn-secondary.bg-complete:active:focus {
    background-color: #48b0f7;
}

.arlo#arlo .btn-secondary.bg-danger,
.arlo#arlo .btn-secondary.bg-danger:hover,
.arlo#arlo .btn-secondary.bg-danger:active,
.arlo#arlo .btn-secondary.bg-danger:focus,
.arlo#arlo .btn-secondary.bg-danger:active:focus {
    background-color: #f55753;
}

.arlo#arlo .event-card .card-front .date .day,
.arlo#arlo .event-card .card-front .date .month,
.arlo#arlo .event-card .card-front .date .date-sep {
    color: #494949 !important;
}

.arlo#arlo .checkbox-filter label:hover,
.arlo#arlo .radio-filter label:hover,
.arlo#arlo .checkbox-filter label > a:hover,
.arlo#arlo .radio-filter label > a:hover {
    color: #494949;
}

.arlo#arlo .timezone .selectize-control .selectize-input:after {
    background-color: #494949 !important;
}

.arlo#arlo .timezone .selectize-control.no-bg .selectize-input:after {
    color: white !important;
}

/* Fix: hide duplicate WordPress page title on the Catalog page
   ("Catalog: {category}") since [arlo_category_title] already
   renders the category heading inside the Arlo widget. Scoped to
   just the Catalog page (page-id-523) so no other pages are affected. */
.page-id-523 .wp-block-post-title {
    display: none;
}

/* ------------------------------------------------------------------
   Breadcrumb trail (Catalog > Category) - copied verbatim from the
   live site's computed CSS so it renders identically here. The
   Arlo-for-WordPress bundled theme doesn't ship this styling, so
   without it the breadcrumb list falls back to unstyled browser
   defaults.
   ------------------------------------------------------------------ */
.arlo-breadcrumbs.breadcrumbs { position: relative; }

.arlo-breadcrumbs.breadcrumbs ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.arlo-breadcrumbs.breadcrumbs .inner::after {
    content: "";
    display: table;
    clear: both;
}

.arlo-breadcrumbs.breadcrumbs ul li {
    display: block;
    padding: 12px 16px 12px 30px;
    margin: 0;
    height: 50px;
    background-color: #0b1921;
    border-bottom: 1px solid rgba(0,0,0,.05);
    position: relative;
    float: left;
}
@media (max-width: 767px) {
    .arlo-breadcrumbs.breadcrumbs ul li { padding: 5px 16px 5px 30px; height: 36px; }
}

.arlo-breadcrumbs.breadcrumbs ul li a { color: #fff; }

.arlo-breadcrumbs.breadcrumbs ul li.root {
    background-color: #47545d;
    z-index: 2;
    padding-left: 16px;
}

.arlo-breadcrumbs.breadcrumbs ul li:nth-of-type(2) {
    background-color: #1e2b34;
}

.arlo-breadcrumbs.breadcrumbs ul li::after,
.arlo-breadcrumbs.breadcrumbs ul li::before {
    content: " ";
    position: absolute;
    right: -20px;
    width: 20px;
    background-color: transparent;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-color: transparent transparent transparent #0b1921;
    border-width: 25px 0 25px 15px;
    z-index: 1;
}
@media (max-width: 767px) {
    .arlo-breadcrumbs.breadcrumbs ul li::after,
    .arlo-breadcrumbs.breadcrumbs ul li::before {
        right: -10px;
        width: 5px;
        border-width: 18px 0 18px 10px;
    }
}

.arlo-breadcrumbs.breadcrumbs ul li::before {
    border-left-color: rgba(0,0,0,.11);
    right: -21px;
}
@media (max-width: 767px) {
    .arlo-breadcrumbs.breadcrumbs ul li::before { right: -11px; }
}

.arlo-breadcrumbs.breadcrumbs ul li.root::after { border-left-color: #47545d; }
.arlo-breadcrumbs.breadcrumbs ul li.root::before { border: none; }

.arlo-breadcrumbs.breadcrumbs ul li:nth-of-type(2)::after,
.arlo-breadcrumbs.breadcrumbs ul li:nth-of-type(2)::before {
    border-left-color: #1e2b34;
}

/* ------------------------------------------------------------------
   Category banner: wraps the category H1 + breadcrumb in one shared
   full-bleed dark section, matching the live site's <header
   class="bg-primary"> treatment. Breaks out of the WordPress content
   column using the standard full-bleed technique, then re-centers
   content at Arlo's own container widths (750/970/1170).
   ------------------------------------------------------------------ */
.cu-category-banner {
    background-color: #323F48;
    box-sizing: border-box;
    padding: 30px 15px 20px;
}

.cu-category-banner-inner {
    max-width: 750px;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .cu-category-banner-inner { max-width: 970px; }
}
@media (min-width: 1200px) {
    .cu-category-banner-inner { max-width: 1170px; }
}

.cu-category-banner h1.cu-category-title {
    color: #fff;
    margin-top: 0;
    font-weight: 300;
}

.cu-category-banner .cu-breadcrumbs {
    margin: 16px 0 0;
}

/* ------------------------------------------------------------------
   Similar courses accordion (chevron expand/collapse) - added to
   match the expand behaviour on the live Arlo site.
   Uses native <details>/<summary> markup added in the Event page
   template (Pages > Event). No JS required.
   Selectors prefixed with #arlo to beat the bundled theme's CSS
   (theme rules use an ID selector, so class-only selectors lose).
   ------------------------------------------------------------------ */

#arlo .arlo-suggest-templates {
    list-style: none;
    margin: 0;
    padding: 0;
}

#arlo .arlo-suggest-templates .arlo-suggest-template-item {
    border-bottom: 1px solid #e0e0e0;
}

#arlo .arlo-suggest-templates .arlo-suggest-template-details {
    padding: 0;
}

#arlo .arlo-suggest-templates summary.arlo-suggest-template-summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

#arlo .arlo-suggest-templates summary.arlo-suggest-template-summary::-webkit-details-marker {
    display: none;
}

#arlo .arlo-suggest-templates summary.arlo-suggest-template-summary::marker {
    content: "";
}

#arlo .arlo-suggest-template-chevron {
    display: inline-block !important;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-style: solid !important;
    border-width: 0 2px 2px 0 !important;
    border-color: currentColor !important;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex: none;
}

#arlo .arlo-suggest-template-details[open] .arlo-suggest-template-chevron {
    transform: rotate(45deg);
}

#arlo .arlo-suggest-template-panel {
    padding: 0 4px 16px 22px;
}

#arlo .arlo-suggest-template-panel p {
    margin-top: 0;
}

#arlo .arlo-suggest-template-panel .arlo-more-info {
    display: inline-block;
    margin-top: 4px;
}


/* ------------------------------------------------------------------
   Class session cards - restyled to match production (white card,
   plain grey typography, teal Register button) instead of the
   plugin's default colored date/duration bars.
   ------------------------------------------------------------------ */
.arlo#arlo ul.arlo-list.events {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}
.arlo#arlo ul.arlo-list.events > li.arlo-event {
    flex: 1 1 300px;
    max-width: calc(33.333% - 16px);
    background: #ffffff !important;
    box-shadow: -1px 1px 3px 0 rgba(121,129,135,0.3);
    padding: 20px !important;
    border-radius: 0;
    list-style: none !important;
    margin: 0 !important;
}
@media (max-width: 900px) {
    .arlo#arlo ul.arlo-list.events > li.arlo-event { max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
    .arlo#arlo ul.arlo-list.events > li.arlo-event { max-width: 100%; }
}
.arlo#arlo .arlo-date.arlo-background-color1 {
    background: none !important;
    color: #626262 !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    text-align: left !important;
}
.arlo#arlo .arlo-event-duration.arlo-background-color2 {
    background: none !important;
    color: #626262 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}
.arlo#arlo .arlo-event-location {
    font-size: 14px;
    font-weight: 300;
    color: #626262;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}
.arlo#arlo .arlo-event-location i {
    color: #626262;
    font-size: 13px;
}
.arlo#arlo ul.arlo-event-offers {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    font-size: 14px;
    font-weight: 300;
    color: #626262;
}
.arlo#arlo .arlo-event-registration .arlo-button.arlo-register {
    background: #03799A !important;
    border: 1px solid #03799A !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    padding: 6px 17px !important;
    font-size: 14px !important;
    display: inline-block;
    text-decoration: none !important;
    font-weight: 400 !important;
}
.arlo#arlo .arlo-event-registration .arlo-button.arlo-register:hover {
    background: #056077 !important;
    border-color: #056077 !important;
}
.arlo#arlo .arlo-sessions-wrapper {
    font-size: 14px;
    font-weight: 300;
    color: #626262;
}

.arlo#arlo .arlo-date.arlo-background-color1,
.arlo#arlo .arlo-event-duration.arlo-background-color2 {
    text-transform: none !important;
    letter-spacing: normal !important;
}

.arlo#arlo .arlo-event-registration .arlo-button.arlo-register {
    text-transform: none !important;
}


/* ------------------------------------------------------------------
   Course banner: title, description, duration, and price combined
   into one full-width dark band (matches production). The native
   WordPress page-title band is hidden on these pages since the
   title now lives inside the Arlo banner instead.
   ------------------------------------------------------------------ */
body.arlo_event-template-default .wp-block-group.alignfull.has-background.has-global-padding {
    display: none !important;
}
.arlo#arlo .arlo-template-head {
    background: #323F48;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 32px;
    padding: 48px 0 40px;
    box-sizing: border-box;
}
.arlo#arlo .arlo-template-head-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.arlo#arlo .arlo-template-head-title {
    color: #ffffff !important;
    font-size: 40px;
    font-weight: 400;
    margin: 0 0 16px;
    line-height: 1.2;
}
.arlo#arlo .arlo-template-head p {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 300;
    max-width: 900px;
    margin: 0 0 20px;
    line-height: 1.6;
}
.arlo#arlo .arlo-template-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
}
.arlo#arlo .arlo-template-head-meta i {
    margin-right: 6px;
}
@media (max-width: 782px) {
    .arlo#arlo .arlo-template-head-title { font-size: 28px; }
}

.arlo#arlo .arlo-template-head {
    margin-top: 0 !important;
    text-align: left !important;
}
.arlo#arlo .arlo-template-head-inner {
    text-align: left !important;
}

body.arlo_event-template-default .entry-content.wp-block-post-content {
    margin-top: 0 !important;
}
body.arlo_event-template-default .arlo#arlo {
    padding-top: 0 !important;
}


/* ------------------------------------------------------------------
   Catalog cards: make the whole tile clickable, not just the title
   text - the title link and the "View upcoming dates" link both
   point to the same course page, so it's safe to stretch one over
   the full card.
   ------------------------------------------------------------------ */
.arlo#arlo .arlo-list.catalogue li.arlo-catalogue-event {
    position: relative;
}
.arlo#arlo .arlo-list.catalogue li.arlo-catalogue-event .arlo-template-name::after {
    content: "";
    position: absolute;
    inset: 0;
}
.arlo#arlo .arlo-list.catalogue li.arlo-catalogue-event:hover {
    cursor: pointer;
}


/* Search page: remove box around next-running date links */
body.page-id-559 .arlo-next-running .arlo-register {
    border: none !important;
    padding: 0 !important;
}


/* Fix: "Show more dates" hidden overflow list was being forced visible (flex) by the responsive grid rules, showing every session at once instead of paginating.
   Only force it hidden while it's in its initial/untoggled state (inline style still says display:none from the server-rendered markup) so the
   "Show me more dates" click handler (which switches the inline style to display:block) is still able to reveal it afterwards. */
.arlo#arlo ul.arlo-list.arlo-show-more-hidden.events[style*="display: none"],
.arlo#arlo ul.arlo-list.arlo-show-more-hidden.events[style*="display:none"] {
    display: none !important;
}