/* Match the existing service dropdown, scoped to the course navigation. */
#header .menu-item-3817 > .sub-menu {
    width: 520px;
    max-width: calc(100vw - 40px);
    padding: 16px 20px 20px;
    border-top: 2px solid #1a56db;
    border-radius: 0 0 8px 8px;
}
#header .menu-item-3817.current-dropdown > .sub-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
#header .menu-item-3817 > .sub-menu > li {
    width: 100%;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
}
#header .menu-item-3817 > .sub-menu > li + li { margin-top: 6px; }
#header .menu-item-3817 > .sub-menu > li > a {
    display: block;
    padding: 12px;
    margin: 0;
    border: 0;
    white-space: normal;
    background: transparent;
    transition: background-color .18s ease;
}
#header .menu-item-3817 > .sub-menu > li > a:hover,
#header .menu-item-3817 > .sub-menu > li > a:focus-visible {
    background: #eef3fd;
}
.menu-item-3817 .hpb-course-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Branded Squircles for Course Logos */
.menu-item-3817 .hpb-course-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
    overflow: hidden;
}
.menu-item-3817 a:hover .hpb-course-badge-icon {
    transform: scale(1.06);
}
.menu-item-3817 .badge-claude img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1. WordPress Logo Badge */
.badge-wp {
    background: linear-gradient(135deg, #0073aa 0%, #005177 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 115, 170, 0.35) !important;
}

/* 2. Claude Logo Badge */
.badge-claude {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
}

/* 3. ChatGPT Logo Badge */
.badge-chatgpt {
    background: linear-gradient(135deg, #10a37f 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 163, 127, 0.35) !important;
}

.menu-item-3817 .hpb-course-copy { display: block; min-width: 0; }
.menu-item-3817 .hpb-course-copy strong {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #101828;
}
.menu-item-3817 .hpb-course-description {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #667085;
    text-transform: none;
    letter-spacing: normal;
}
.menu-item-3817 a:hover .hpb-course-copy strong,
.menu-item-3817 a:focus-visible .hpb-course-copy strong { color: #1a56db; }
#main-menu .menu-item-3817 .hpb-course-card { gap: 12px; }
#main-menu .menu-item-3817 .hpb-course-badge-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
#main-menu .menu-item-3817 .hpb-course-description { font-size: 12px; line-height: 18px; }
@media (prefers-reduced-motion: reduce) {
    #header .menu-item-3817 > .sub-menu > li > a { transition: none; }
}

/* 4. Vibe Coding Logo Badge */
.badge-vibe {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}