/*
 * Chitambo 2026 repositioning styles.
 *
 * Site-wide additions that support the therapy-first positioning and the
 * NDIS registration disclosure. Kept in its own file so the vendor theme
 * stylesheet stays untouched.
 */

/* ------------------------------------------------------------------
   NDIS registration status disclosure
   ------------------------------------------------------------------ */

.ndis-status {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f1f6fb;
    border: 1px solid #cfe0f0;
    border-left: 5px solid #146eb8;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 32px 0;
    color: #26374a;
    line-height: 1.75;
}

.ndis-status-icon {
    flex: 0 0 auto;
    color: #146eb8;
    font-size: 1.35rem;
    line-height: 1.5;
}

.ndis-status-body p {
    margin: 0 0 12px;
    font-size: 0.98rem;
}

.ndis-status-body p:last-child {
    margin-bottom: 0;
}

.ndis-status-lead strong {
    color: #0f2f4d;
}

.ndis-status--compact {
    padding: 16px 18px;
    margin: 24px 0;
}

.ndis-status--compact .ndis-status-body p {
    font-size: 0.92rem;
}

/* Inside the premium prose column the callout should sit flush with the copy. */
.pm-prose .ndis-status {
    margin: 34px 0;
}

/* ------------------------------------------------------------------
   Home page service cards

   .stories-img sized its image by width alone, so the card's height was
   whatever the source image's aspect ratio happened to be: a portrait
   thumbnail (375x450) grew a card to roughly twice its neighbours and broke
   the row. Pin the media box to the same 16/10 the premium .pm-card-media
   uses, and let the card fill its column so every card in a row lines up
   whatever image an editor uploads later.
   ------------------------------------------------------------------ */

/* Owl positions .owl-item by transform and floats it, so slides in a row do not
   match heights on their own. Making the stage a flex row and each item a flex
   child gives every card in view the same height. */
.stories-slider .owl-stage {
    display: flex;
}

.stories-slider .owl-item {
    display: flex;
    height: auto;
}

.stories-slider .owl-item > .stories-item {
    width: 100%;
}

/* Owl needs room either side of the track for the arrows and below it for the
   dots; the shadow on each card also needs somewhere to fall. */
.stories-slider.owl-carousel {
    padding: 10px 0 0;
}

.stories-slider .owl-stage-outer {
    padding: 12px 0 24px;
    margin: -12px 0 0;
}

.stories-area .stories-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stories-area .stories-img {
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
}

/* The <a> around each thumbnail is inline by default, so the image had no
   resolved height to size against. */
.stories-area .stories-img > a {
    display: block;
    width: 100%;
    height: 100%;
}

.stories-area .stories-img img {
    height: 100%;
    object-fit: cover;
}

.stories-area .stories-content {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The min-height further down style.css was propping up short titles; with
   the card stretching, it only adds dead space. */
.stories-area .stories-content h4 {
    min-height: 0;
    margin-bottom: 0;
}

/* ---- carousel arrows -------------------------------------------------
   The theme's other sliders reveal their arrows only on hover and hide them
   below 1199px, which leaves no visible control on a phone. These stay put.  */

.stories-slider .owl-nav {
    margin: 0;
}

.stories-slider .owl-nav button.owl-prev,
.stories-slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.stories-slider .owl-nav button.owl-prev { left: -22px; }
.stories-slider .owl-nav button.owl-next { right: -22px; }

.stories-slider .owl-nav button i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--theme-color, #f06b23);
    font-size: 19px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.stories-slider .owl-nav button:hover i,
.stories-slider .owl-nav button:focus-visible i {
    background: var(--theme-color, #f06b23);
    color: #fff;
}

.stories-slider .owl-nav button:focus-visible i {
    outline: 3px solid #146eb8;
    outline-offset: 2px;
}

.stories-slider .owl-nav button.disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---- carousel dots --------------------------------------------------- */

.stories-slider .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
}

.stories-slider .owl-dots .owl-dot {
    background: transparent;
    border: 0;
    padding: 6px 2px;
    line-height: 0;
}

.stories-slider .owl-dots .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    margin: 0;
    transition: background 0.3s ease, width 0.3s ease;
}

.stories-slider .owl-dots .owl-dot.active span {
    width: 30px;
    border-radius: 6px;
    background: var(--theme-color, #f06b23);
}

.stories-slider .owl-dots .owl-dot:focus-visible span {
    outline: 3px solid #146eb8;
    outline-offset: 3px;
}

/* Wide viewports have gutter to spare, so the arrows clear the cards entirely. */
@media (min-width: 1400px) {
    .stories-slider .owl-nav button.owl-prev { left: -62px; }
    .stories-slider .owl-nav button.owl-next { right: -62px; }
}

/* Below ~1200px there is no gutter left, so bring them inside the edge of the
   first and last card, where the white disc still reads against the image. */
@media (max-width: 1199px) {
    .stories-slider .owl-nav button.owl-prev { left: 4px; }
    .stories-slider .owl-nav button.owl-next { right: 4px; }

    .stories-slider .owl-nav button i {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }
}

/* ------------------------------------------------------------------
   FAQ accordion

   style.css spaces the items 30px apart, which read as disconnected blocks
   rather than one list now that they all start closed. Tighten the rhythm and
   drop the trailing margin on the last item.
   ------------------------------------------------------------------ */

.faq-area .accordion-item {
    margin-bottom: 12px;
}

.faq-area .accordion-item:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Service stream grouping on the services hub
   ------------------------------------------------------------------ */

.pm-stream {
    margin-bottom: 64px;
}

.pm-stream:last-child {
    margin-bottom: 0;
}

.pm-stream-head {
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e8f0;
}

.pm-stream-head .pm-stream-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #146eb8;
    margin-bottom: 10px;
}

.pm-stream-head h2 {
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}

.pm-stream-head p {
    margin: 0;
    max-width: 760px;
    color: #475569;
    line-height: 1.75;
}

.pm-stream--primary .pm-stream-head {
    border-bottom-color: #f06b23;
}

.pm-stream--primary .pm-stream-head .pm-stream-eyebrow {
    color: #f06b23;
}

@media (max-width: 767px) {
    .pm-stream-head h2 {
        font-size: 1.5rem;
    }

    .ndis-status {
        flex-direction: column;
        gap: 10px;
        padding: 18px;
    }
}