html,
body {
    margin: 0;
    min-height: 100%;
    padding: 0;
    font-family: var(--wa-font-sans);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-normal);
}

.site-page {
    --menu-width: 16rem;
    min-height: 100vh;
}

/* Before wa-page upgrades, keep main content visible and hide nav chrome */
wa-page:not(:defined) [slot='navigation'],
wa-page:not(:defined) [slot='navigation-header'],
wa-page:not(:defined) [slot='header'] {
    display: none;
}

wa-page:not(:defined) > #main-content,
wa-page:not(:defined) > main {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding: var(--wa-space-m);
}

wa-page[view='mobile'] {
    --menu-width: auto;
}

.site-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wa-space-s);
    width: 100%;
    margin-inline-start: auto;
}

.readable-width,
.site-main {
    box-sizing: border-box;
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

.page-title,
.section-heading {
    margin: 0 0 var(--wa-space-m);
    font-size: var(--wa-font-size-2xl);
}

.section-heading {
    font-size: var(--wa-font-size-xl);
}

.page-subtitle {
    margin: 0 0 var(--wa-space-l);
    color: var(--wa-color-text-quiet);
}

.page-hero {
    margin-bottom: var(--wa-space-l);
}

.page-hero img {
    width: 100%;
    max-height: 22rem;
    object-fit: contain;
    background: var(--wa-color-surface-lowered);
}

.featured-card img[slot='media'] {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--wa-color-surface-lowered);
}

.card-grid {
    display: grid;
    gap: var(--wa-space-m);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    align-items: stretch;
}

.featured-card,
.card-grid .book-card {
    height: 100%;
}

.featured-card wa-details,
.book-card wa-details {
    margin: 0;
}

#books-grid .book-card {
    box-shadow: var(--wa-shadow-s);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-xs);
    margin-bottom: var(--wa-space-l);
}

.section-card wa-details {
    margin-bottom: var(--wa-space-s);
}

.resume-role {
    margin: 0 0 var(--wa-space-xs);
    font-weight: var(--wa-font-weight-semibold);
}

.resume-meta {
    margin: 0.25rem 0 var(--wa-space-s);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.section-card {
    margin-bottom: var(--wa-space-l);
}

.section-card h2,
.section-card h3,
.section-card h4 {
    margin-top: 0;
}

.bullet-list {
    margin: 0;
    padding-left: 1.25rem;
}

.bullet-list li {
    margin-bottom: 0.35rem;
}

.bullet-list li::marker {
    color: var(--wa-color-brand);
}

.code-block {
    position: relative;
    margin-top: var(--wa-space-s);
}

.code-block pre {
    margin: 0;
    padding: var(--wa-space-m);
    border-radius: var(--wa-radius-m);
    background: var(--wa-color-surface-lowered);
    overflow-x: auto;
}

.code-block wa-copy-button {
    position: absolute;
    top: var(--wa-space-xs);
    right: var(--wa-space-xs);
}

.site-nav-brand {
    margin: 0;
    font-weight: var(--wa-font-weight-bold);
    font-size: var(--wa-font-size-l);
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-menu wa-details.nav-group {
    margin: 0;
}

.nav-menu wa-details.nav-group::part(header) {
    padding: 0;
}

.nav-menu wa-details.nav-group::part(content) {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0 var(--wa-space-xs);
}

.nav-group-label {
    display: block;
    padding: var(--wa-space-s) var(--wa-space-m);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    color: var(--wa-color-text-quiet);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.nav-link {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: var(--wa-radius-m);
    color: var(--wa-color-text-normal);
    text-decoration: none;
}

.nav-link.active {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

.competency-desktop,
.competency-mobile {
    display: block;
}

.competency-mobile {
    display: none;
}

.section-card .competency-desktop {
    min-height: 14rem;
}

@media (max-width: 768px) {
    .competency-desktop {
        display: none;
    }

    .competency-mobile {
        display: block;
    }
}

/* Responsive: mobile-first toggles for tab vs. details layouts */
.show-mobile-only {
    display: block;
}

.show-desktop-only {
    display: none;
}

@media (min-width: 769px) {
    .show-mobile-only {
        display: none;
    }

    .show-desktop-only {
        display: block;
    }
}

.flex-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wa-space-xs);
}