/* Header Component Styles */

.main-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: calc(var(--header-height, 100px) + var(--size-4));
    padding-bottom: var(--size-6);
    margin-bottom: var(--size-8);
    background: linear-gradient(-60deg, var(--accent-color) 30%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: var(--box-shadow);
    z-index: 100;
    overflow: hidden;
}

/* Fallback for color-mix - Chrome 111+, Firefox 113+, Safari 16.4+ */
@supports (background: color-mix(in srgb, red 50%, blue 50%)) {
    .main-header {
        background: linear-gradient(-60deg, var(--accent-color) 30%, color-mix(in srgb, var(--accent-color) 80%, var(--color-black) 20%) 100%);
    }
}

.main-header .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.main-header .content .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:var(--size-4);
}

.main-header .content .container .text {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.main-header .content .image {
    position: relative;
    height: 100%;
    max-height: var(--size-10);
    margin: 0 var(--size-4) 0 0;
    filter: drop-shadow(var(--box-shadow-text));
}

.main-header .content .image img {
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
}

.main-header .content .image svg {
    height: 100%;
    width: 100%;
    max-height: var(--size-10);
    color: var(--text-color);
}

.main-header h1,
.main-header p {
    position: relative;
    color: var(--text-color);
    text-shadow: var(--box-shadow-text);
    white-space: break-spaces;
}

.main-header.post-header h1 {
    font-size: var(--size-6);
}

.main-header .icon {
    height: 400%;
    top: -50%;
    right: -10%;
    position: absolute;
    z-index: 3;
    color: var(--accent-color);
    filter: contrast(0.5) brightness(0.75);
    opacity: 0.05;
    -ms-transform: rotate(10deg) translateY(-25%);
    -webkit-transform: rotate(10deg) translateY(-25%);
    transform: rotate(10deg) translateY(-25%);
    pointer-events: none;
    aspect-ratio: 1 / 1;
}

/* Fallback for aspect-ratio - Chrome 88+, Firefox 87+, Safari 15+ */
@supports not (aspect-ratio: 1 / 1) {
    .main-header .icon {
        width: 200%;
        height: 200%;
    }
}

@media screen and (min-width: 768px) {
    .main-header .icon {
        height: 500%;
        right: 10%;
    }
}

.breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--size-2);
    padding: var(--size-4) 0;
}

@media screen and (min-width: 768px) {
    .breadcrumbs {
        justify-content: flex-start;
    }
}

.breadcrumbs a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-prescriptions);
    gap: var(--size-1);
    transition: var(--transition-std);
}

.breadcrumbs a svg {
    height: var(--size-4);
    aspect-ratio: 1 / 1;
}

/* Fallback for aspect-ratio in breadcrumbs */
@supports not (aspect-ratio: 1 / 1) {
    .breadcrumbs a svg {
        width: var(--size-4);
        height: var(--size-4);
    }
}

.breadcrumbs a:hover {
    color: rgba(0, 0, 0, 0.1);
}

/* Fallback for color-mix in breadcrumbs hover - Chrome 111+, Firefox 113+, Safari 16.4+ */
@supports (color: color-mix(in srgb, red 50%, blue 50%)) {
    .breadcrumbs a:hover {
        color: color-mix(in srgb, var(--color-prescriptions), black 10%);
    }
}

.breadcrumbs .current {
    color: var(--text-color);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--size-4);
    box-shadow: var(--box-shadow);
    background-color: var(--accent-color);
}