/*
==============================================================================
TeleradiologyHUB
Global Frontend Design System
Cassiopeia / Joomla 5
Version 1
==============================================================================

Scope:
- Global visual language
- Header / navigation
- Typography
- Containers
- Breadcrumbs
- Buttons
- Forms
- Tables
- Alerts
- Footer foundation
- Responsive behaviour

Fabrik-specific directory styling will be handled separately.
==============================================================================
*/


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    --thub-navy: #12355b;
    --thub-navy-deep: #0b2948;
    --thub-navy-soft: #1d4b73;

    --thub-teal: #159a9c;
    --thub-teal-dark: #117d7f;
    --thub-teal-soft: #eaf7f7;

    --thub-bg: #f7f9fc;
    --thub-surface: #ffffff;
    --thub-surface-soft: #f8fafc;

    --thub-text: #263548;
    --thub-heading: #142436;
    --thub-muted: #64748b;

    --thub-border: #e2e8f0;
    --thub-border-strong: #cbd5e1;

    --thub-success: #16845b;
    --thub-danger: #b42318;
    --thub-warning: #b76e00;

    --thub-radius-sm: 8px;
    --thub-radius: 12px;
    --thub-radius-lg: 18px;

    --thub-shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 1px 4px rgba(15, 23, 42, 0.04);

    --thub-shadow:
        0 8px 24px rgba(15, 23, 42, 0.07);

    --thub-content-width: 1320px;

    --cassiopeia-color-primary: var(--thub-navy);
    --cassiopeia-color-link: var(--thub-navy);
    --cassiopeia-color-hover: var(--thub-teal-dark);
}


/* ==========================================================================
   2. PAGE FOUNDATION
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--thub-bg);
    color: var(--thub-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.wrapper-fluid .site-grid,
.site-grid {
    width: min(
        calc(100% - 48px),
        var(--thub-content-width)
    );
    max-width: var(--thub-content-width);
    margin-inline: auto;
}

main {
    min-width: 0;
}

a {
    color: var(--thub-navy);
    text-underline-offset: 3px;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

a:hover,
a:focus {
    color: var(--thub-teal-dark);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--thub-heading);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 650;
}

p {
    margin-bottom: 1rem;
}

.text-muted,
small {
    color: var(--thub-muted) !important;
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

.container-header {
    position: relative;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    background-image: none;
    color: var(--thub-heading);
    border-bottom: 1px solid var(--thub-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.container-header.position-sticky {
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 8px 24px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.container-header .grid-child {
    width: min(
        calc(100% - 48px),
        var(--thub-content-width)
    );
    max-width: var(--thub-content-width);
    margin-inline: auto;
}


/* ==========================================================================
   5. BRAND
   ========================================================================== */

.container-header .navbar-brand {
    margin: 0;
    padding: 1.15rem 0 0.45rem;
}

.container-header .navbar-brand a {
    color: var(--thub-navy-deep);
    text-decoration: none;
}

.container-header .site-title {
    color: var(--thub-navy-deep);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1;
}

.container-header .site-description {
    margin-top: 0.35rem;
    color: var(--thub-muted);
    font-size: 0.85rem;
}


/* ==========================================================================
   6. MAIN NAVIGATION
   ========================================================================== */

.container-header .container-nav {
    padding: 0 0 0.9rem;
}

.container-header .mod-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: center;
    margin: 0;
}

.container-header .mod-menu > li {
    position: relative;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.6rem 0.8rem;
    color: var(--thub-text);
    border-radius: var(--thub-radius-sm);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
    color: var(--thub-navy-deep);
    background: var(--thub-teal-soft);
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
    color: var(--thub-teal-dark);
    background: transparent;
}

.container-header .mod-menu > li.active > a::after,
.container-header .mod-menu > li.current > a::after {
    position: absolute;
    right: 0.8rem;
    bottom: 0.2rem;
    left: 0.8rem;
    height: 2px;
    content: "";
    background: var(--thub-teal);
    border-radius: 999px;
}


/* ==========================================================================
   7. MOBILE NAVIGATION
   ========================================================================== */

.container-header .navbar-toggler {
    color: var(--thub-navy);
    background: var(--thub-surface);
    border: 1px solid var(--thub-border-strong);
    border-radius: var(--thub-radius-sm);
    box-shadow: none;
}

.container-header .navbar-toggler:hover,
.container-header .navbar-toggler:focus {
    color: var(--thub-teal-dark);
    background: var(--thub-teal-soft);
    border-color: var(--thub-teal);
}


/* ==========================================================================
   8. MAIN CONTENT AREA
   ========================================================================== */

.site-grid {
    padding-top: 1.75rem;
    padding-bottom: 4rem;
}

.container-component {
    min-width: 0;
}

.com-content-featured,
.com-content-category-blog,
.item-page,
.com-fabrik {
    min-width: 0;
}


/* ==========================================================================
   9. BREADCRUMBS
   ========================================================================== */

.container-breadcrumbs {
    margin-top: 1.25rem;
}

.container-breadcrumbs .mod-breadcrumbs {
    width: min(
        calc(100% - 48px),
        var(--thub-content-width)
    );
    max-width: var(--thub-content-width);
    margin-inline: auto;
}

.breadcrumb {
    gap: 0.25rem;
    align-items: center;
    margin: 0;
    padding: 0.6rem 0;
    background: transparent;
    color: var(--thub-muted);
    font-size: 0.9rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--thub-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--thub-teal-dark);
}

.breadcrumb-item.active {
    color: var(--thub-text);
}


/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

.btn {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border-radius: var(--thub-radius-sm);
    font-weight: 600;
    box-shadow: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    color: #fff;
    background: var(--thub-navy);
    border-color: var(--thub-navy);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: var(--thub-navy-deep);
    border-color: var(--thub-navy-deep);
}

.btn-outline-primary {
    color: var(--thub-navy);
    border-color: var(--thub-navy);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background: var(--thub-navy);
    border-color: var(--thub-navy);
}

.btn-success {
    background: var(--thub-success);
    border-color: var(--thub-success);
}


/* ==========================================================================
   11. FORMS
   ========================================================================== */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
    min-height: 44px;
    border-color: var(--thub-border-strong);
    border-radius: var(--thub-radius-sm);
    background-color: var(--thub-surface);
    color: var(--thub-text);
    box-shadow: none;
}

textarea {
    min-height: 120px;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--thub-teal);
    box-shadow: 0 0 0 0.2rem rgba(21, 154, 156, 0.12);
}

label,
.form-label {
    color: var(--thub-heading);
    font-weight: 600;
}


/* ==========================================================================
   12. TABLES
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    color: var(--thub-text);
    border-color: var(--thub-border);
}

.table > :not(caption) > * > * {
    padding: 0.85rem 0.75rem;
    border-bottom-color: var(--thub-border);
}

.table thead th {
    color: var(--thub-heading);
    background: var(--thub-surface-soft);
    border-bottom-width: 1px;
    font-weight: 700;
    vertical-align: middle;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background: rgba(234, 247, 247, 0.45);
}


/* ==========================================================================
   13. CARDS / GENERAL PANELS
   ========================================================================== */

.card {
    border: 1px solid var(--thub-border);
    border-radius: var(--thub-radius);
    background: var(--thub-surface);
    box-shadow: var(--thub-shadow-sm);
}

.card-header {
    border-bottom-color: var(--thub-border);
    background: var(--thub-surface-soft);
    color: var(--thub-heading);
    font-weight: 700;
}


/* ==========================================================================
   14. ALERTS
   ========================================================================== */

.alert {
    border-radius: var(--thub-radius);
}


/* ==========================================================================
   15. PAGINATION
   ========================================================================== */

.pagination {
    gap: 0.25rem;
}

.page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--thub-navy);
    border-color: var(--thub-border);
    border-radius: var(--thub-radius-sm) !important;
}

.page-link:hover {
    color: var(--thub-teal-dark);
    background: var(--thub-teal-soft);
    border-color: var(--thub-teal);
}

.page-item.active .page-link {
    color: #fff;
    background: var(--thub-navy);
    border-color: var(--thub-navy);
}


/* ==========================================================================
   16. BACK TO TOP
   ========================================================================== */

.back-to-top-link {
    right: 1.5rem;
    bottom: 1.5rem;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--thub-navy);
    color: #fff;
    box-shadow: var(--thub-shadow);
}

.back-to-top-link:hover,
.back-to-top-link:focus {
    background: var(--thub-teal-dark);
    color: #fff;
}


/* ==========================================================================
   17. FOOTER FOUNDATION
   ========================================================================== */

.container-footer {
    margin-top: 0;
    padding: 0;
    background: var(--thub-navy-deep);
    background-image: none;
    color: rgba(255, 255, 255, 0.82);
}

.container-footer .grid-child {
    width: min(
        calc(100% - 48px),
        var(--thub-content-width)
    );
    max-width: var(--thub-content-width);
    margin-inline: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.container-footer a {
    color: rgba(255, 255, 255, 0.9);
}

.container-footer a:hover {
    color: #fff;
}


/* ==========================================================================
   18. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: 3px solid rgba(21, 154, 156, 0.35);
    outline-offset: 2px;
}


/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */

@media (min-width: 992px) {

    .container-header {
        min-height: 0;
    }

    .container-header .grid-child {
        display: flex;
        align-items: center;
    }

    .container-header .navbar-brand {
        flex: 0 0 auto;
        padding: 1.05rem 0;
        margin-right: 2rem;
    }

    .container-header .container-nav {
        flex: 1 1 auto;
        justify-content: flex-start;
        padding: 0;
    }

    .container-header .mod-menu {
        justify-content: flex-start;
    }
}


@media (max-width: 991.98px) {

    body.wrapper-fluid .site-grid,
    .site-grid,
    .container-header .grid-child,
    .container-breadcrumbs .mod-breadcrumbs,
    .container-footer .grid-child {
        width: min(calc(100% - 32px), var(--thub-content-width));
    }

    .container-header .navbar-brand {
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    .container-header .container-nav {
        padding-bottom: 0.75rem;
    }

    .container-header .mod-menu {
        display: block;
        width: 100%;
        padding-top: 0.5rem;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        width: 100%;
        padding: 0.7rem 0.6rem;
    }

    .container-header .mod-menu > li.active > a::after,
    .container-header .mod-menu > li.current > a::after {
        right: auto;
        bottom: 0.25rem;
        left: 0.6rem;
        width: 32px;
    }

    .site-grid {
        padding-top: 1.25rem;
        padding-bottom: 3rem;
    }
}


@media (max-width: 575.98px) {

    body.wrapper-fluid .site-grid,
    .site-grid,
    .container-header .grid-child,
    .container-breadcrumbs .mod-breadcrumbs,
    .container-footer .grid-child {
        width: calc(100% - 24px);
    }

    h1 {
        margin-bottom: 1rem;
    }

    .btn {
        min-height: 44px;
    }

    .back-to-top-link {
        right: 1rem;
        bottom: 1rem;
    }
}


/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/*
==============================================================================
TeleradiologyHUB
Global Frontend Design V2
Human / editorial refinement
==============================================================================
*/


/* ==========================================================================
   21. V2 — WARMER PAGE TONE
   ========================================================================== */

:root {
    --thub-bg: #fbfbfa;
    --thub-surface-soft: #f7f8f8;
    --thub-text: #2f3a46;
    --thub-heading: #13263a;
    --thub-muted: #697586;
}


/* ==========================================================================
   22. V2 — COMPACT SINGLE-ROW DESKTOP HEADER
   ========================================================================== */

@media (min-width: 992px) {

    .container-header .grid-child {
        display: flex;
        align-items: center;
        min-height: 76px;
    }

    .container-header .navbar-brand {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin: 0 2.6rem 0 0;
        padding: 0;
    }

    .container-header .site-title {
        font-size: 1.45rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        white-space: nowrap;
    }

    .container-header .container-nav {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-height: 76px;
        padding: 0;
    }

    .container-header .mod-menu {
        display: flex;
        align-items: center;
        gap: 1.7rem;
        width: 100%;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        min-height: auto;
        padding: 0;
        border-radius: 0;
        font-size: 0.96rem;
        font-weight: 600;
        background: transparent;
    }

    .container-header .mod-menu > li > a:hover,
    .container-header .mod-menu > li > a:focus {
        color: var(--thub-teal-dark);
        background: transparent;
    }

    .container-header .mod-menu > li.active > a,
    .container-header .mod-menu > li.current > a {
        color: var(--thub-teal-dark);
    }

    .container-header .mod-menu > li.active > a::after,
    .container-header .mod-menu > li.current > a::after {
        right: 0;
        bottom: -0.7rem;
        left: 0;
        height: 2px;
    }
}


/* ==========================================================================
   23. V2 — INNER PAGE TYPOGRAPHY
   ========================================================================== */

.container-component > h1:first-child,
.com-content-featured > h1:first-child,
.com-content-category-blog > h1:first-child,
.item-page > h1:first-child,
.com-fabrik > h1:first-child {
    font-size: clamp(2rem, 3vw, 2.65rem);
    margin-bottom: 1rem;
    letter-spacing: -0.035em;
}


/* ==========================================================================
   24. V2 — PAGE SPACING
   ========================================================================== */

.site-grid {
    padding-top: 1.35rem;
    padding-bottom: 3.5rem;
}

.container-component {
    padding-top: 0.25rem;
}


/* ==========================================================================
   25. V2 — BREADCRUMBS: QUIETER, EDITORIAL
   ========================================================================== */

.container-breadcrumbs {
    margin-top: 0.6rem;
}

.container-breadcrumbs .mod-breadcrumbs {
    padding-top: 0;
    padding-bottom: 0;
}

.breadcrumb {
    min-height: auto;
    padding: 0.35rem 0;
    background: transparent;
    border: 0;
    font-size: 0.86rem;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #a3adb9;
}


/* ==========================================================================
   26. V2 — REDUCE GENERIC UI FEEL
   ========================================================================== */

.card {
    border-radius: 10px;
    box-shadow: none;
}

.btn {
    border-radius: 7px;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
    border-radius: 7px;
}


/* ==========================================================================
   27. V2 — TABLES MORE EDITORIAL, LESS DASHBOARD-LIKE
   ========================================================================== */

.table thead th {
    background: transparent;
    border-bottom: 1px solid var(--thub-border-strong);
}

.table tbody tr:hover {
    background: rgba(21, 154, 156, 0.035);
}


/* ==========================================================================
   28. V2 — MOBILE HEADER REFINEMENT
   ========================================================================== */

@media (max-width: 991.98px) {

    .container-header .grid-child {
        min-height: 66px;
    }

    .container-header .navbar-brand {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .container-header .site-title {
        font-size: 1.3rem;
    }

    .container-header .container-nav {
        padding-bottom: 0.65rem;
    }

    .site-grid {
        padding-top: 1rem;
    }
}


/* ==========================================================================
   29. V2 — SMALL SCREEN TYPOGRAPHY
   ========================================================================== */

@media (max-width: 575.98px) {

    h1 {
        font-size: 2rem;
    }

    .container-component > h1:first-child,
    .com-content-featured > h1:first-child,
    .com-content-category-blog > h1:first-child,
    .item-page > h1:first-child,
    .com-fabrik > h1:first-child {
        font-size: 2rem;
    }
}



/*
==============================================================================
TeleradiologyHUB
Global Frontend Design V3
Desktop shell + breadcrumb refinement
==============================================================================
*/


/* ==========================================================================
   30. V3 — TRUE SINGLE-ROW DESKTOP HEADER
   ========================================================================== */

@media (min-width: 992px) {

    .container-header {
        min-height: 74px;
    }

    .container-header > .grid-child {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas: "brand nav";
        align-items: center;
        column-gap: 2.75rem;

        width: min(
            calc(100% - 48px),
            var(--thub-content-width)
        );
        max-width: var(--thub-content-width);

        min-height: 74px;
        margin-inline: auto;
    }

    .container-header .navbar-brand {
        grid-area: brand;
        align-self: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .container-nav {
        grid-area: nav;
        align-self: center;

        display: flex !important;
        align-items: center;
        justify-content: flex-start;

        width: auto;
        min-height: 74px;
        margin: 0;
        padding: 0 !important;
    }

    .container-header .navbar-collapse {
        display: flex !important;
        align-items: center;
        width: 100%;
    }

    .container-header .mod-menu {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        width: auto;
        margin: 0;
        padding: 0;
        gap: 1.9rem;
    }

    .container-header .mod-menu > li {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        display: inline-flex;
        align-items: center;

        min-height: 74px;
        padding: 0;

        color: var(--thub-text);
        background: transparent;
        border-radius: 0;

        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    .container-header .mod-menu > li.active > a::after,
    .container-header .mod-menu > li.current > a::after {
        right: 0;
        bottom: 17px;
        left: 0;
        height: 2px;
    }

    .container-header .site-title {
        font-size: 1.5rem;
        line-height: 1;
    }
}


/* ==========================================================================
   31. V3 — INNER PAGE TITLE SCALE
   ========================================================================== */

.com-fabrik h1,
.container-component > h1:first-child,
.com-content-featured > h1:first-child,
.com-content-category-blog > h1:first-child,
.item-page > h1:first-child {
    font-size: clamp(2rem, 2.7vw, 2.5rem);
    line-height: 1.12;
    margin-top: 0;
    margin-bottom: 1.15rem;
}


/* ==========================================================================
   32. V3 — CONTENT RHYTHM
   ========================================================================== */

.site-grid {
    padding-top: 1rem;
}

.container-component {
    padding-top: 0;
}


/* ==========================================================================
   33. V3 — BREADCRUMB CLEANUP
   ========================================================================== */

.container-breadcrumbs {
    margin-top: 0;
}

.container-breadcrumbs .mod-breadcrumbs {
    padding-top: 0.85rem;
    padding-bottom: 0.2rem;
}

.breadcrumb {
    margin-bottom: 0;
    padding: 0;
    font-size: 0.84rem;
}

.breadcrumb .mod-breadcrumbs__here {
    display: none;
}

.breadcrumb-item a,
.breadcrumb-item.active {
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0.45rem;
    padding-left: 0.45rem;
}


/* ==========================================================================
   34. V3 — REMOVE STRAY HOME/BREADCRUMB ICON APPEARANCE
   ========================================================================== */

.breadcrumb .icon-location,
.breadcrumb .icon-home,
.container-breadcrumbs .icon-location,
.container-breadcrumbs .icon-home {
    display: none !important;
}


/* ==========================================================================
   35. V3 — MOBILE PRESERVATION
   ========================================================================== */

@media (max-width: 991.98px) {

    .container-header > .grid-child {
        display: block !important;
        min-height: 0;
    }

    .container-header .site-title {
        font-size: 1.3rem;
    }

    .container-header .navbar-brand {
        margin: 0;
        padding: 0.8rem 0;
    }

    .container-header .container-nav {
        min-height: 0;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        min-height: auto;
    }
}



/*
==============================================================================
TeleradiologyHUB
Global Frontend Design V4
Actual Cassiopeia header DOM correction
==============================================================================
*/


/* ==========================================================================
   36. V4 — HEADER ITSELF IS THE DESKTOP GRID
   ========================================================================== */

@media (min-width: 992px) {

    .container-header {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas: "brand nav";
        align-items: center;
        column-gap: 3rem;

        width: 100%;
        min-height: 72px;

        padding-left: max(
            24px,
            calc((100vw - var(--thub-content-width)) / 2)
        );

        padding-right: max(
            24px,
            calc((100vw - var(--thub-content-width)) / 2)
        );
    }

    .container-header > .grid-child {
        width: auto !important;
        max-width: none !important;
        min-height: 72px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header > .grid-child:first-of-type {
        grid-area: brand;
        display: flex !important;
        align-items: center;
    }

    .container-header > .grid-child.container-nav {
        grid-area: nav;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
    }

    .container-header .navbar-brand {
        display: flex;
        align-items: center;

        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .brand-logo {
        display: inline-flex;
        align-items: center;

        color: var(--thub-navy-deep);
        text-decoration: none;
        line-height: 1;
    }

    .container-header .brand-logo span {
        display: inline-block;

        font-size: 1.48rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.035em;

        white-space: nowrap;
    }

    .container-header .container-nav {
        min-height: 72px;
    }

    .container-header .mod-menu {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        width: auto;
        margin: 0;
        padding: 0;

        gap: 1.85rem;
    }

    .container-header .mod-menu > li {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        position: relative;

        display: inline-flex;
        align-items: center;

        min-height: 72px;
        padding: 0;

        color: var(--thub-text);
        background: transparent;
        border-radius: 0;

        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1;

        white-space: nowrap;
    }

    .container-header .mod-menu > li > a:hover,
    .container-header .mod-menu > li > a:focus {
        color: var(--thub-teal-dark);
        background: transparent;
    }

    .container-header .mod-menu > li.active > a,
    .container-header .mod-menu > li.current > a {
        color: var(--thub-teal-dark);
    }

    .container-header .mod-menu > li.active > a::after,
    .container-header .mod-menu > li.current > a::after {
        position: absolute;
        right: 0;
        bottom: 14px;
        left: 0;

        height: 2px;

        content: "";
        background: var(--thub-teal);
        border-radius: 999px;
    }
}


/* ==========================================================================
   37. V4 — ENSURE NO OLD DESKTOP ROW BEHAVIOUR SURVIVES
   ========================================================================== */

@media (min-width: 992px) {

    .container-header .grid-child {
        display: flex;
    }

    .container-header .container-nav {
        width: auto;
    }

    .container-header .navbar-collapse {
        display: flex !important;
        align-items: center;
        width: auto;
    }
}


/* ==========================================================================
   38. V4 — MOBILE RESET
   ========================================================================== */

@media (max-width: 991.98px) {

    .container-header {
        display: block !important;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .container-header > .grid-child {
        width: min(
            calc(100% - 32px),
            var(--thub-content-width)
        ) !important;

        max-width: var(--thub-content-width) !important;
        min-height: 0;

        margin-inline: auto !important;
    }

    .container-header > .grid-child:first-of-type {
        display: block !important;
    }

    .container-header > .grid-child.container-nav {
        display: block !important;
    }

    .container-header .brand-logo span {
        font-size: 1.3rem;
    }
}



/*
==============================================================================
TELERADIOLOGYHUB HOMEPAGE DESIGN V1
Editorial healthcare / radiology network
==============================================================================
*/


/* ==========================================================================
   HOME FOUNDATION
   ========================================================================== */

.thub-home {
    --thub-home-rule: #dde5e8;
    padding-bottom: 2rem;
}

.thub-home h1,
.thub-home h2,
.thub-home h3 {
    margin-top: 0;
}

.thub-eyebrow {
    margin: 0 0 1.1rem;
    color: var(--thub-teal-dark);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.thub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
    gap: clamp(3rem, 6vw, 6.5rem);
    align-items: center;

    min-height: 590px;
    padding: clamp(4.5rem, 7vw, 7rem) 0 clamp(4rem, 6vw, 6rem);

    border-bottom: 1px solid var(--thub-home-rule);
}

.thub-hero__content {
    max-width: 800px;
}

.thub-hero h1 {
    max-width: 790px;
    margin-bottom: 1.55rem;

    color: var(--thub-heading);

    font-size: clamp(3rem, 4.8vw, 4.8rem);
    font-weight: 680;
    line-height: 1.01;
    letter-spacing: -0.052em;
}

.thub-hero__lead {
    max-width: 670px;
    margin: 0;

    color: var(--thub-muted);

    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.7;
}

.thub-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;

    margin-top: 2.2rem;
}

.thub-hero .btn-lg {
    min-height: 48px;
    padding: 0.72rem 1.3rem;

    font-size: 0.96rem;
}

.thub-text-link {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;

    color: var(--thub-heading);

    font-size: 0.95rem;
    font-weight: 650;
    text-decoration: none;
}

.thub-text-link span {
    color: var(--thub-teal-dark);
    transition: transform 0.18s ease;
}

.thub-text-link:hover span {
    transform: translateX(3px);
}


/* ==========================================================================
   HERO VISUAL / LOTTIE
   ========================================================================== */

.thub-hero__visual {
    min-width: 0;
}

.thub-lottie-shell {
    position: relative;

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

    width: 100%;
    min-height: 330px;
    aspect-ratio: 1 / 0.82;

    overflow: hidden;
}

.thub-lottie-shell::before {
    position: absolute;
    z-index: -1;

    width: 82%;
    aspect-ratio: 1;
    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 154, 156, 0.105) 0%,
            rgba(21, 154, 156, 0.04) 44%,
            rgba(21, 154, 156, 0) 72%
        );
}

.thub-lottie-shell dotlottie-wc {
    display: block;
    width: min(100%, 470px) !important;
    height: min(100%, 390px) !important;
}


/* ==========================================================================
   HERO SERVICE INDEX
   ========================================================================== */

.thub-hero__services {
    margin-top: 0.4rem;
    border-top: 1px solid var(--thub-home-rule);
}

.thub-hero__services > div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0 0.8rem;

    padding: 0.9rem 0;

    border-bottom: 1px solid var(--thub-home-rule);
}

.thub-hero__services span {
    grid-row: 1 / 3;
    padding-top: 0.05rem;

    color: var(--thub-teal-dark);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.thub-hero__services strong {
    color: var(--thub-heading);

    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.35;
}

.thub-hero__services small {
    color: var(--thub-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* ==========================================================================
   SECTION INTRO
   ========================================================================== */

.thub-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);

    padding: clamp(5rem, 8vw, 8rem) 0 3.2rem;
}

.thub-section-heading .thub-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -0.6rem;
}

.thub-section-heading h2 {
    max-width: 620px;
    margin-bottom: 0;

    font-size: clamp(2.25rem, 3.6vw, 3.35rem);
    font-weight: 670;
    line-height: 1.07;
    letter-spacing: -0.045em;
}

.thub-section-heading > p:last-child {
    align-self: end;

    max-width: 570px;
    margin: 0;

    color: var(--thub-muted);

    font-size: 1.04rem;
    line-height: 1.75;
}


/* ==========================================================================
   THREE SERVICE PATHWAYS
   ========================================================================== */

.thub-pathways {
    border-bottom: 1px solid var(--thub-home-rule);
}

.thub-pathway {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 210px;
    gap: 2rem;
    align-items: start;

    padding: 2.5rem 0;

    border-top: 1px solid var(--thub-home-rule);
}

.thub-pathway__number {
    padding-top: 0.15rem;

    color: var(--thub-teal-dark);

    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.thub-pathway__label {
    margin: 0 0 0.65rem;

    color: var(--thub-muted);

    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.thub-pathway h3 {
    margin-bottom: 0.7rem;

    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 680;
    letter-spacing: -0.025em;
}

.thub-pathway__body > p:not(.thub-pathway__label):not(.thub-pathway__meta) {
    max-width: 720px;
    margin-bottom: 0.8rem;

    color: var(--thub-text);

    line-height: 1.7;
}

.thub-pathway__meta {
    margin: 0;

    color: var(--thub-muted);

    font-size: 0.87rem;
}

.thub-pathway__action {
    padding-top: 1.55rem;
    text-align: right;
}

.thub-pathway__action a {
    color: var(--thub-heading);

    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.thub-pathway__action a span {
    display: inline-block;

    margin-left: 0.3rem;

    color: var(--thub-teal-dark);

    transition: transform 0.18s ease;
}

.thub-pathway__action a:hover {
    color: var(--thub-teal-dark);
}

.thub-pathway__action a:hover span {
    transform: translateX(3px);
}


/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.thub-how {
    display: grid;
    grid-template-columns: minmax(250px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(3rem, 8vw, 8rem);

    padding: clamp(5rem, 8vw, 7.5rem) 0;
}

.thub-how__intro h2 {
    max-width: 440px;

    font-size: clamp(2.1rem, 3.2vw, 2.95rem);
    font-weight: 670;
    line-height: 1.09;
    letter-spacing: -0.045em;
}

.thub-how__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.thub-how__steps article {
    padding-top: 1rem;

    border-top: 2px solid var(--thub-heading);
}

.thub-how__steps article > span {
    display: block;

    margin-bottom: 2.3rem;

    color: var(--thub-teal-dark);

    font-size: 0.74rem;
    font-weight: 700;
}

.thub-how__steps h3 {
    margin-bottom: 0.55rem;

    font-size: 1.18rem;
    font-weight: 700;
}

.thub-how__steps p {
    margin: 0;

    color: var(--thub-muted);

    font-size: 0.92rem;
    line-height: 1.65;
}


/* ==========================================================================
   RADIOLOGIST CTA
   ========================================================================== */

.thub-professionals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);

    padding: clamp(3.5rem, 6vw, 5.5rem);

    background: var(--thub-navy-deep);
    color: #fff;
}

.thub-professionals .thub-eyebrow {
    color: #75d2cf;
}

.thub-professionals h2 {
    max-width: 540px;
    margin-bottom: 0;

    color: #fff;

    font-size: clamp(2.1rem, 3.2vw, 3rem);
    font-weight: 660;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.thub-professionals > div:last-child {
    align-self: end;
}

.thub-professionals > div:last-child p {
    max-width: 590px;
    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 1.01rem;
    line-height: 1.78;
}


/* ==========================================================================
   HOMEPAGE ARTICLE CHROME
   ========================================================================== */

/*
The homepage already supplies its own H1.
Avoid generic Joomla article spacing fighting with the hero.
*/

body.itemid-101 .site-grid {
    padding-top: 0;
}

body.itemid-101 .container-component {
    padding-top: 0;
}


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

@media (max-width: 991.98px) {

    .thub-hero {
        grid-template-columns: 1fr;
        gap: 2.5rem;

        min-height: auto;
        padding-top: 4.25rem;
    }

    .thub-hero__content {
        max-width: 760px;
    }

    .thub-hero__visual {
        display: grid;
        grid-template-columns: minmax(260px, 0.8fr) minmax(280px, 1.2fr);
        gap: 2rem;
        align-items: center;
    }

    .thub-lottie-shell {
        min-height: 270px;
    }

    .thub-section-heading {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .thub-section-heading .thub-eyebrow {
        margin-bottom: 0;
    }

    .thub-pathway {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .thub-pathway__action {
        grid-column: 2;

        padding-top: 0;

        text-align: left;
    }

    .thub-how {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .thub-professionals {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


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

@media (max-width: 700px) {

    .thub-hero {
        gap: 2.25rem;

        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    .thub-hero h1 {
        font-size: clamp(2.45rem, 11vw, 3.5rem);
        line-height: 1.02;
    }

    .thub-hero__lead {
        font-size: 1rem;
    }

    .thub-hero__actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 1rem;
    }

    .thub-hero__visual {
        display: block;
    }

    .thub-lottie-shell {
        min-height: 250px;
        margin-bottom: 1rem;
    }

    .thub-section-heading {
        padding-top: 4rem;
    }

    .thub-section-heading h2 {
        font-size: 2.15rem;
    }

    .thub-pathway {
        grid-template-columns: 1fr;

        gap: 0.75rem;

        padding: 1.9rem 0;
    }

    .thub-pathway__action {
        grid-column: 1;
    }

    .thub-how {
        padding: 4rem 0;
    }

    .thub-how__steps {
        grid-template-columns: 1fr;

        gap: 2.25rem;
    }

    .thub-how__steps article > span {
        margin-bottom: 1rem;
    }

    .thub-professionals {
        margin-right: -12px;
        margin-left: -12px;

        padding: 3rem 1.5rem;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .thub-text-link span,
    .thub-pathway__action a span {
        transition: none;
    }
}