/* Full-width styling for home page only */
/* Target the home page by checking if navigation is hidden */
.md-sidebar--primary[hidden] ~ .md-content {
    margin-left: 0;
    max-width: 100%;
}

.md-sidebar--secondary[hidden] {
    display: none;
}

/* Make content full-width when both sidebars are hidden */
.md-sidebar--primary[hidden] ~ .md-content .md-content__inner {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Override the grid max-width for full-width pages */
.md-sidebar--primary[hidden] ~ .md-content .md-grid {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Remove all padding from the main content wrapper on home page */
.md-sidebar--primary[hidden] ~ .md-content .md-content__inner > * {
    margin: 0;
    padding: 0;
}

/* Ensure landing page sections are truly full width */
.md-sidebar--primary[hidden] ~ .md-content .landing-page {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    max-width: 100vw;
}

/* Override any container constraints */
.md-sidebar--primary[hidden] ~ .md-content article {
    max-width: 100%;
}

/* Top navigation tab separators */
/* Add vertical separator after "Demos" tab (before Ports) */
/* Using nth-child to target the 3rd tab (Demos) */
.md-tabs__list .md-tabs__item:nth-child(3) {
    position: relative;
    padding-right: 1.2rem;
    margin-right: 1.2rem;
}

.md-tabs__list .md-tabs__item:nth-child(3)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.8em;
    width: 1px;
    background-color: currentColor;
    opacity: 0.3;
}