.teacher-hero {
    background: #feedd3 url('img/snappy-singalong-teachers-hub-hero.jpg') right center / auto 100% no-repeat;
}

.teacher-hero h1 {
    color: #19466d;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65);
}

.teacher-hero p {
    max-width: 720px;
}

.teacher-hero .fw-semibold{
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
    line-height: 1.6;
}
.teacher-step {
    background: #fff;
}

.teacher-download {
    background: #f1f8fc;
    border: 1px solid #d4e6f3;
}
.btn-teachers{
    --bs-btn-color: #fff;
    --bs-btn-bg: #e7a103;
    --bs-btn-border-color: #e7a103;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c68a00;
    --bs-btn-hover-border-color: #bb8200;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bb8200;
    --bs-btn-active-border-color: #b07900;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e7a103;
    --bs-btn-disabled-border-color: #e7a103;
}

.btn-brown {
    --bs-btn-color: #ffeaca;
    --bs-btn-bg: #bb4902;
    --bs-btn-border-color: #bb4902;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #963a02;
    --bs-btn-hover-border-color: #963a02;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #803202;
    --bs-btn-active-border-color: #803202;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #bb4902;
    --bs-btn-disabled-border-color: #bb4902;
}

.card {
    border-radius: 0.85rem;
    background-color: #f0faf1;
}

.card .btn {
    align-self: flex-start;
}

.teacher-lesson-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.custom-success-link {
  color: #198754 !important;
  text-decoration: none; /* Removes the default blue underline */
  transition: text-underline-offset 0.15s ease; /* Smooth motion */
}

.custom-success-link:hover {
  color: #198754 !important;
  text-decoration: underline;
  text-decoration-color: #198754; /* Forces green underline */
  text-underline-offset: 3px;
}

.teacher-lesson-result[hidden] {
    display: none !important;
}

.teacher-lesson-filters {
    background-color: #58B6BE;
    border: 1px solid #4CA6AE;
    border-radius: 8px;
    padding: 1.5rem;
    color: #F8FCFC;
}

.teacher-lesson-filters label {
    color: #F8FCFC;
}

.teacher-lesson-filters .form-control,
.teacher-lesson-filters .form-select {
    background-color: #F8FCFC;
    color: #243B3E;
    border: 1px solid #D2E8E9;
}

.teacher-lesson-filters .form-control::placeholder {
    color: #6B8588;
    opacity: 1;
}

.teacher-lesson-filters .btn {
    background-color: #176B75;
    color: #FFFFFF;
    border: 1px solid #176B75;
}

.teacher-lesson-filters .btn:hover {
    background-color: #10545C;
    border-color: #10545C;
    color: #FFFFFF;
}

.h2, h2 {
  font-size: calc(0.85rem + .9vw);
}

/* Media Queries */
/* Large: 992px–1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .teacher-hero {
        background-position: 270% center;
    }
}


/* YouTube playlist section */

.teacher-section-eyebrow {
    color: #bb4902;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.teacher-playlists-heading h2 {
    color: #2b5273;
}

.teacher-playlists-intro {
    max-width: 680px;
    margin-bottom: 0;
    color: #526575;
}

.teacher-playlist-card {
    display: flex;
    height: 100%;
    min-height: 220px;
    padding: 1.5rem;
    border: 1px solid rgba(43, 82, 115, 0.12);
    border-radius: 1rem;
    color: #2b5273;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.teacher-playlist-card:hover {
    color: #2b5273;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(43, 82, 115, 0.12);
}

.teacher-playlist-card:focus-visible {
    outline: 3px solid #2b5273;
    outline-offset: 3px;
}

.teacher-playlist-rhymes {
    background-color: #edf7f8;
}

.teacher-playlist-dance {
    background-color: #fff0e4;
}

.teacher-playlist-action {
    background-color: #f0f3fb;
}

.teacher-playlist-bedtime {
    background-color: #f2eef9;
}

.teacher-playlist-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.teacher-playlist-card h3 {
    margin-bottom: 0.65rem;
    color: #2b5273;
    font-size: 1.2rem;
    font-weight: 700;
}

.teacher-playlist-card p {
    margin-bottom: 1.25rem;
    color: #465c6d;
}

.teacher-playlist-link {
    margin-top: auto;
    color: #bb4902;
    font-weight: 700;
}

.teacher-playlist-link span {
    display: inline-block;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.teacher-playlist-card:hover .teacher-playlist-link span {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .teacher-playlist-card,
    .teacher-playlist-link span {
        transition: none;
    }

    .teacher-playlist-card:hover {
        transform: none;
    }
}

.teacher-playlist-card {
    display: block;
    height: 100%;
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
}

.teacher-playlist-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

.teacher-playlist-card-content {
    padding: 1.25rem;
}




/* Popular songs section */

.teacher-popular-heading h2 {
    margin-bottom: 0.75rem;
}

.teacher-popular-intro {
    max-width: 760px;
    margin-bottom: 1rem;
}

.teacher-streaming-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2b5273;
    font-weight: 600;
    margin-bottom: 0;
}

.teacher-streaming-note svg {
    flex-shrink: 0;
    color: #58bcca;
}

.teacher-song-category {
    padding: 1.25rem;
    border: 1px solid #e1e8eb;
    border-radius: 12px;
    background: #F0F4F8;
    box-shadow: 0 3px 10px rgba(43, 82, 115, 0.06);
}


.teacher-song-category-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: #2B5273;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #CDE7E9;
}

.teacher-song-category-heading > svg {
    flex-shrink: 0;
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    padding: 10px;
    margin-top: 0;
    color: #167D8C;
    background: #FFF;
    border-radius: 50%;
}

.teacher-song-category-heading > div {
    flex: 1;
    min-width: 0;
}

.teacher-song-category-heading h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.35rem;
    color: #2B5273;
}

.teacher-song-category-heading p {
    margin: 0;
    color: #586772;
    font-size: 0.92rem;
    line-height: 1.5;
}


.teacher-song-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.teacher-song-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem;
    min-width: 0;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.teacher-song-item:hover,
.teacher-song-item:focus-visible {
    background: #f0f8f9;
}

.teacher-song-item:focus-visible {
    outline: 2px solid #2b5273;
    outline-offset: 2px;
}

.teacher-song-item img {
    display: block;
    flex: 0 0 112px;
    width: 112px;
    height: 63px;
    object-fit: cover;
    border-radius: 6px;
    background: #e8f0f2;
}

.teacher-song-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}

.teacher-song-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #2b5273;
    overflow-wrap: anywhere;
}

.teacher-song-duration {
    font-size: 0.82rem;
    color: #66747d;
}

.teacher-song-watch {
    font-size: 0.85rem;
    font-weight: 600;
    color: #167d8c;
}

.teacher-song-watch span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.teacher-song-item:hover .teacher-song-watch span {
    transform: translateX(3px);
}


.teacher-youtube-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 0.75rem;
    color: #2b5273;
}

.teacher-youtube-note svg {
    flex-shrink: 0;
    color: #e62117;
    margin-right: 0.15rem;
}

.teacher-youtube-note a {
    color: #2b5273;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.teacher-youtube-note a:hover {
    color: #167d8c;
}

.teacher-song-category-featured {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.teacher-song-category-featured .teacher-song-category-heading {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .teacher-song-category-featured {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Keep thumbnails and text comfortable on narrow screens */

@media (max-width: 420px) {
    .teacher-song-category {
        padding: 0.85rem;
    }

    .teacher-song-item {
        gap: 0.65rem;
        padding: 0.45rem;
    }

    .teacher-song-item img {
        flex-basis: 92px;
        width: 92px;
        height: 52px;
    }

    .teacher-song-title {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-song-item,
    .teacher-song-watch span {
        transition: none;
    }
}












/* ========================================
   TEACHER HUB — INDIVIDUAL LESSON PAGE
   ======================================== */

:root {
    --teacher-teal: #58B6BE;
    --teacher-teal-dark: #176B75;
    --teacher-teal-hover: #10545C;
    --teacher-green: #105C35;
    --teacher-pale-teal: #EAF6F7;
    --teacher-pale-green: #F0F8F1;
    --teacher-border: #D5E2DF;
    --teacher-text: #263532;
}

/* Main lesson content */

.teacher-lesson-content h1,
.teacher-lesson-content h2,
.teacher-lesson-content h3 {
    color: var(--teacher-green);
}

.teacher-lesson-content h1 {
    font-weight: 800;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.teacher-lesson-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.teacher-lesson-content p,
.teacher-lesson-content li {
    line-height: 1.7;
}

/* Lesson thumbnail */

.teacher-lesson-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    
    border: 1px solid var(--teacher-border);
}

/* Age and duration details */

.teacher-lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0 2rem;
}

.teacher-lesson-meta span {
    display: inline-block;
    background: var(--teacher-pale-teal);
    color: #174D52;
    border: 1px solid #C6E5E7;
    border-radius: 50rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
}

/* Objectives and materials */

.teacher-info-panel {
    background: var(--teacher-pale-teal);
    border-left: 4px solid var(--teacher-teal);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
}

.teacher-info-panel ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* Activity steps */

.teacher-step {
    background: #EAF6F7;
    border: 1px solid var(--teacher-border) !important;
    border-radius: 10px !important;
    padding: 1.25rem !important;
    transition: border-color 0.2s ease;
}

.teacher-step:hover {
    border-color: var(--teacher-teal) !important;
}

.teacher-step h3 {
    color: var(--teacher-green);
    font-weight: 700;
}

.teacher-step .text-secondary {
    color: var(--teacher-teal-dark) !important;
}

/* Buttons */

.teacher-lesson-content .btn-primary {
    background: var(--teacher-teal-dark);
    border-color: var(--teacher-teal-dark);
    color: #FFFFFF;
    border-radius: 6px;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
}

.teacher-lesson-content .btn-primary:hover {
    background: var(--teacher-teal-hover);
    border-color: var(--teacher-teal-hover);
    color: #FFFFFF;
}

/* Download callout */

.teacher-download {
    background: var(--teacher-pale-green);
    border: 1px solid #D1E5D3;
    border-radius: 10px !important;
    padding: 1.5rem !important;
}

.teacher-download h2 {
    color: var(--teacher-green);
}

.explore-all-packs span{
    display: inline-block;
    transition: transform 0.2s ease;
}
.explore-all-packs:hover span {
    transform: translateX(3px);
}

/* Lesson sidebar */

.teacher-lesson-sidebar {
    background: var(--teacher-pale-teal);
    border: 1px solid #D5E9EA;
    border-radius: 12px;
    padding: 1.5rem;
}

.teacher-lesson-sidebar h2,
.teacher-lesson-sidebar h3 {
    color: var(--teacher-green);
}

.teacher-lesson-sidebar a {
    color: var(--teacher-teal-dark);
    font-weight: 600;
    text-decoration: none;
}

.teacher-lesson-sidebar a:hover {
    text-decoration: underline;
}

/* Mobile spacing */

@media (max-width: 767.98px) {
    .teacher-lesson-meta {
        gap: 0.5rem;
    }

    .teacher-lesson-content h1 {
        font-size: 1.8rem;
    }

    .teacher-info-panel,
    .teacher-download,
    .teacher-lesson-sidebar {
        padding: 1rem !important;
    }
}

.btn-play-youtube {
  background: linear-gradient(to bottom, #f9ca40, #fdcc43);
  color: #000;
  border: none;
  border-radius: 50px; /* pill shape */
  padding: 12px 28px;
  font-size: 0.83em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-play-youtube:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
  color: #000;
}
.btn-play-youtube:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.play-icon {
  width: 24px;
  height: 24px;
}





/* Activity Packs page */

.teacher-packs-page {
    color: #2b5273;
}

.teacher-packs-hero {
    background: #edf7f8;
    padding: 2.5rem 0 3rem;
}

.teacher-packs-eyebrow {
    color: #bb4902;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.teacher-packs-page-title {
    color: #2b5273;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.teacher-packs-intro {
    max-width: 760px;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.teacher-packs-note {
    display: inline-block;
    background: #ffffff;
    border-left: 4px solid #58bcca;
    border-radius: 4px;
    padding: 0.65rem 1rem;
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Category navigation */

.teacher-packs-categories {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.teacher-packs-subheading {
    color: #2b5273;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.teacher-packs-category-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    height: 100%;
    padding: 1.25rem;
    background: #edf7f8;
    border: 1px solid #d3e9ec;
    border-radius: 12px;
    color: #2b5273;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                border-color 0.2s ease;
}

.teacher-packs-category-link:hover {
    color: #2b5273;
    border-color: #58bcca;
    box-shadow: 0 5px 16px rgba(43, 82, 115, 0.1);
    transform: translateY(-3px);
}

.teacher-packs-category-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.6rem;
    background: #58bcca;
    color: #ffffff;
    border-radius: 50px;
    font-size: 0.9rem;
}

.teacher-packs-category-link > span:last-child {
    color: #bb4902;
    font-size: 1.2rem;
}

/* Resource sections */

.teacher-packs-resources {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.teacher-packs-section {
    scroll-margin-top: 2rem;
}

.teacher-packs-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid #58bcca;
}

.teacher-packs-heading {
    color: #2b5273;
    font-size: 1.65rem;
    font-weight: 700;
}

.teacher-packs-description {
    max-width: 720px;
    line-height: 1.6;
}

.teacher-packs-count {
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    background: #edf7f8;
    border-radius: 50px;
    color: #2b5273;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Individual downloadable resource */

.teacher-packs-card {
    display: flex;
    flex-direction: column;
    background: #f5f9fa;
    border: 1px solid #dcebed;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.teacher-packs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(43, 82, 115, 0.1);
}

.teacher-packs-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    padding: 1.25rem;
}

.teacher-packs-card-title {
    color: #2b5273;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.teacher-packs-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: auto;

    color: #2b5273;
    background: transparent;
    border: 1px solid #58bcca;
    border-radius: 6px;
}

.teacher-packs-download:hover,
.teacher-packs-download:focus {
    color: #2b5273;
    background: #dceff1;
    border-color: #58bcca;
}

/* Bottom call to action */

.teacher-packs-bottom-cta {
    background: #edf7f8;
    padding: 3rem 0;
    margin-top: 1rem;
}

.teacher-packs-bottom-cta h2 {
    color: #2b5273;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.teacher-packs-bottom-cta p {
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
}
/* Thumbnail Image */
.teacher-packs-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #edf7f8;
}
#song-activity-packs .teacher-packs-thumbnail{
    aspect-ratio: auto;
}

.teacher-packs-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.teacher-packs-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    padding: 1.25rem;
}

.teacher-packs-card-title {
    flex-grow: 1;
}

.teacher-packs-preview {
    width: 100%;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}

.teacher-packs-pdf-preview {
    display: block;
    width: 100%;
    height: auto;
}

.teacher-packs-preview-error {
    padding: 2rem 1rem;
    margin: 0;
    text-align: center;
    line-height: 1.5;
    color: #666;
    font-size: 0.9rem;
}


/* Keep category headings visible below the sticky navbar */
.teacher-packs-section {
    scroll-margin-top: 100px;
}



/* Related lessons in the lesson sidebar */

.teacher-related-lessons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.teacher-related-lesson {
    margin: 0;
}

.teacher-related-lesson-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.teacher-related-lesson-link img {
    width: 90px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.teacher-related-lesson-link span {
    font-weight: 600;
    line-height: 1.35;
}

.teacher-related-lesson-link:hover span {
    text-decoration: underline;
}


/* Small screens */

@media (max-width: 575.98px) {
    .teacher-packs-hero {
        padding: 1.5rem 0 2rem;
    }

    .teacher-packs-section-heading {
        flex-direction: column;
    }

    .teacher-packs-heading {
        font-size: 1.4rem;
    }

    .teacher-packs-card-body {
        padding: 1rem;
    }

    .teacher-packs-download {
        width: 100%;
    }
}





/* Medium: 768px–991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .teacher-hero {
        background:
            linear-gradient(rgba(254, 237, 211, 0.8), rgba(254, 237, 211, 0.8)),
            url('img/snappy-singalong-teachers-hub-hero.jpg')
            right center / auto 100% no-repeat;
        background-color: #feedd3;
    }
}

/* Small: 576px–767px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .teacher-hero {
        background:
            linear-gradient(rgba(254, 237, 211, 0.8), rgba(254, 237, 211, 0.8)),
            url('img/snappy-singalong-teachers-hub-hero.jpg')
            right center / auto 100% no-repeat;
        background-color: #feedd3;
    }
}

/* Extra small: below 576px */
@media (max-width: 575.98px) {
    .teacher-hero {
        background:
            linear-gradient(rgba(254, 237, 211, 0.8), rgba(254, 237, 211, 0.8)),
            url('img/snappy-singalong-teachers-hub-hero.jpg')
            right center / auto 100% no-repeat;
        background-color: #feedd3;
    }
}

/* Print */
@media print {
    header,
    footer,
    .btn,
    nav {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: none;
        padding: 0 !important;
    }

    .teacher-step,
    .teacher-download {
        break-inside: avoid;
        border-color: #bbb !important;
        background: #fff !important;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}