/* =========================================================
   BALLS STUDY PAGE THEME
   Little Explorers Learning Hub
========================================================= */

.balls-study-page {
    --balls-navy: #24476b;
    --balls-blue: #3d9be9;
    --balls-sky: #dff4ff;
    --balls-yellow: #ffd45a;
    --balls-orange: #f6a34a;
    --balls-green: #72bd55;
    --balls-purple: #9a86f4;
    --balls-coral: #ee765b;
    --balls-cream: #fff8e8;
    --balls-paper: #fffdf8;
    --balls-line: #e6dfd1;
    background: var(--balls-paper);
}

.balls-study-page header {
    background: rgba(255, 253, 248, .96);
    border-bottom: 2px solid rgba(230, 223, 209, .8);
}

.balls-study-page .nav-container { min-height: 82px; }
.balls-study-page .logo h1,
.balls-study-page .logo span,
.balls-study-page nav a { color: var(--balls-navy); }
.balls-study-page .logo span { color: var(--balls-green); }
.balls-study-page nav a:hover { color: var(--balls-blue); }

.balls-study-page .study-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 88px;
    background:
        radial-gradient(circle at 9% 20%, rgba(255, 212, 90, .55) 0 54px, transparent 55px),
        radial-gradient(circle at 93% 16%, rgba(114, 189, 85, .35) 0 70px, transparent 71px),
        radial-gradient(circle at 88% 86%, rgba(61, 155, 233, .25) 0 95px, transparent 96px),
        linear-gradient(135deg, #eaf8ff 0%, #fff8e8 52%, #f3fbe9 100%);
}

.balls-study-page .study-hero .container { position: relative; z-index: 1; }
.balls-study-page .breadcrumb { margin-bottom: 24px; color: var(--balls-navy); font-weight: 700; }
.balls-study-page .breadcrumb a:hover { color: var(--balls-blue); }

.balls-study-page .study-hero h1 {
    max-width: 900px;
    color: var(--balls-navy);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -.035em;
    margin-bottom: 24px;
}

.balls-study-page .study-hero p {
    max-width: 850px;
    color: #40566d;
    font-size: 1.12rem;
    line-height: 1.85;
}

.balls-study-page .featured-study { padding: 72px 0; background: var(--balls-paper); }

.balls-study-page .featured-study-card {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    gap: 42px;
    align-items: center;
    padding: 28px;
    background: #fff;
    border: 2px solid var(--balls-line);
    border-radius: 34px;
    box-shadow: 0 20px 55px rgba(36, 71, 107, .10);
}

.balls-study-page .featured-image { overflow: hidden; border-radius: 26px; background: var(--balls-sky); }
.balls-study-page .featured-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.balls-study-page .featured-label { color: var(--balls-orange); font-weight: 800; letter-spacing: .12em; }
.balls-study-page .featured-text h2 { color: var(--balls-navy); font-size: clamp(2rem, 4vw, 3.2rem); margin: 14px 0 18px; }
.balls-study-page .featured-text p { color: #526579; line-height: 1.85; }

.balls-study-page .featured-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.balls-study-page .featured-highlights div {
    padding: 13px 12px;
    background: #f7fbff;
    border: 1px solid #dcecf7;
    border-radius: 16px;
    color: var(--balls-navy);
    font-weight: 800;
    text-align: center;
}

.balls-study-page .site-stats { padding: 34px 0; background: var(--balls-navy); }
.balls-study-page .stat-card { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; }
.balls-study-page .stat-card h2,
.balls-study-page .stat-card p { color: #fff; }

.balls-study-page .teacher-favorites,
.balls-study-page .featured-studies,
.balls-study-page .interest-areas,
.balls-study-page .season-section,
.balls-study-page .why-section,
.balls-study-page .new-activities { position: relative; }

.balls-study-page .featured-studies { background: var(--balls-cream); }
.balls-study-page .interest-areas { background: #eef9ff; }
.balls-study-page .season-section { background: #fffdf5; }
.balls-study-page .why-section { background: #f4fbed; }
.balls-study-page .new-activities { background: #fff1ed; }
.balls-study-page .teacher-favorites { background: #fff; }
.balls-study-page .section-title h2 { color: var(--balls-navy); }
.balls-study-page .section-title p { color: #607286; }

.balls-study-page .study-grid,
.balls-study-page .season-grid,
.balls-study-page .why-grid,
.balls-study-page .favorite-grid,
.balls-study-page .activity-grid { align-items: start; }

.balls-study-page .study-grid { grid-auto-rows: max-content; }
.balls-study-page .study-card { height: auto; min-height: 0; align-self: start; }
.balls-study-page .study-card:not(:has(img)) { display: flex; flex-direction: column; min-height: 0 !important; }
.balls-study-page .study-card:not(:has(img)) .study-content { flex: 0 0 auto; min-height: 0; }
.balls-study-page .study-card:not(:has(img)) .study-content p { flex: 0 0 auto; margin-bottom: 0; }

.balls-study-page .study-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    object-fit: cover;
    object-position: center;
}

.balls-study-page .balls-related-studies .study-card { overflow: hidden; }
.balls-study-page .balls-related-studies .study-card img { border-radius: 0; }

.balls-study-page .featured-studies .study-card {
    border: 2px solid rgba(230, 223, 209, .85);
    box-shadow: 0 12px 28px rgba(36, 71, 107, .08);
}

.balls-study-page .featured-studies .study-card:hover { border-color: rgba(61, 155, 233, .45); }
.balls-study-page .study-content h3 { color: var(--balls-navy); }
.balls-study-page .study-content p { color: #5b6d80; }

.balls-study-page .favorite-card,
.balls-study-page .interest-card,
.balls-study-page .season-card,
.balls-study-page .why-card,
.balls-study-page .activity-card {
    border: 2px solid rgba(230, 223, 209, .72);
    box-shadow: 0 12px 30px rgba(36, 71, 107, .07);
}

.balls-study-page .favorite-card:hover,
.balls-study-page .interest-card:hover,
.balls-study-page .season-card:hover,
.balls-study-page .why-card:hover,
.balls-study-page .activity-card:hover { border-color: rgba(61, 155, 233, .45); }

/* =========================================================
   SAFE, WEB-RENDERED ICONS
========================================================= */
.balls-study-page .balls-safe-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
}
.balls-study-page .balls-safe-icon::before,
.balls-study-page .balls-safe-icon::after { content: ""; position: absolute; box-sizing: border-box; }

/* Hide the original emoji text in the two existing HTML cards. */
.balls-study-page .season-card:has(.icon-light),
.balls-study-page .why-card:has(.icon-container) { font-size: 0; }
.balls-study-page .season-card:has(.icon-light) h3,
.balls-study-page .why-card:has(.icon-container) h3 { font-size: 1.25rem; }
.balls-study-page .season-card:has(.icon-light) p,
.balls-study-page .why-card:has(.icon-container) p { font-size: 1rem; }

/* Light / feather */
.balls-study-page .icon-light::before {
    width: 25px; height: 42px; border: 4px solid var(--balls-blue);
    border-radius: 100% 0 100% 0; transform: rotate(38deg); background: #eaf8ff;
}
.balls-study-page .icon-light::after {
    width: 4px; height: 40px; background: var(--balls-navy); transform: rotate(38deg);
    box-shadow: 8px 9px 0 -1px var(--balls-blue), 12px 17px 0 -1px var(--balls-blue);
}

/* Containers / bucket */
.balls-study-page .icon-container::before {
    width: 34px; height: 29px; top: 20px; border: 4px solid var(--balls-orange);
    border-radius: 5px 5px 12px 12px; background: #fff4dc;
}
.balls-study-page .icon-container::after {
    width: 30px; height: 25px; top: 7px; border: 4px solid var(--balls-navy);
    border-bottom: 0; border-radius: 20px 20px 0 0;
}

/* Water */
.balls-study-page .icon-water::before {
    width: 34px; height: 43px; top: 7px; border: 4px solid var(--balls-blue);
    border-radius: 50% 50% 55% 55%; transform: rotate(45deg) scale(.78);
    background: linear-gradient(135deg, #ffffff 0%, var(--balls-sky) 48%, #9ddcff 100%);
}
.balls-study-page .icon-water::after {
    width: 10px; height: 10px; border-radius: 50%; background: #fff; top: 18px; left: 22px;
}

/* Texture bin */
.balls-study-page .icon-texture::before {
    width: 43px; height: 37px; border: 4px solid var(--balls-green); border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 43%, var(--balls-green) 44% 56%, transparent 57%),
        linear-gradient(0deg, transparent 43%, var(--balls-green) 44% 56%, transparent 57%),
        #f3fbe9;
}
.balls-study-page .icon-texture::after {
    width: 32px; height: 5px; top: 10px; border-radius: 5px; background: var(--balls-orange);
}

/* Temperature */
.balls-study-page .icon-temperature::before {
    width: 15px; height: 39px; top: 7px; border: 4px solid var(--balls-blue);
    border-radius: 12px; background: linear-gradient(to top, var(--balls-coral) 0 48%, transparent 49%);
}
.balls-study-page .icon-temperature::after {
    width: 27px; height: 27px; bottom: 2px; border: 4px solid var(--balls-coral);
    border-radius: 50%; background: #fff1ed;
}

/* Squeeze */
.balls-study-page .icon-squeeze::before {
    width: 27px; height: 27px; left: 9px; top: 15px; border: 4px solid var(--balls-purple);
    border-radius: 50%; background: #f1edff;
    box-shadow: 20px 8px 0 -2px #fff1ed, 20px 8px 0 2px var(--balls-orange);
}
.balls-study-page .icon-squeeze::after {
    width: 32px; height: 4px; background: var(--balls-navy); transform: rotate(24deg);
}

/* Family icons */
.balls-study-page .icon-home::before { width: 35px; height: 28px; top: 24px; border: 4px solid var(--balls-green); background: #f3fbe9; }
.balls-study-page .icon-home::after { width: 28px; height: 28px; top: 9px; border-left: 4px solid var(--balls-green); border-top: 4px solid var(--balls-green); transform: rotate(45deg); background: #f3fbe9; }
.balls-study-page .icon-photo::before { width: 43px; height: 32px; border: 4px solid var(--balls-blue); border-radius: 6px; background: #eaf8ff; }
.balls-study-page .icon-photo::after { width: 15px; height: 15px; border: 4px solid var(--balls-orange); border-radius: 50%; background: #fff; }
.balls-study-page .icon-question::before { width: 44px; height: 44px; border: 4px solid var(--balls-purple); border-radius: 50%; background: #f1edff; }
.balls-study-page .icon-question::after { content: "?"; color: var(--balls-purple); font-size: 28px; font-weight: 900; line-height: 1; }
.balls-study-page .icon-book::before { width: 39px; height: 43px; border: 4px solid var(--balls-coral); border-radius: 4px; background: linear-gradient(to right, #fff1ed 0 48%, #fff 49% 52%, #fff1ed 53%); }
.balls-study-page .icon-book::after { width: 22px; height: 4px; top: 22px; background: var(--balls-coral); box-shadow: 0 9px 0 var(--balls-orange); }

/* Family Connection: four compact cards, centered. */
.balls-study-page .family-connection .balls-family-grid {
    width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px; justify-content: center; align-items: start;
}
.balls-study-page .family-connection .favorite-card { min-height: 0 !important; height: auto !important; align-self: start; }

/* More Ball Activities: compact cards. */
.balls-study-page .activity-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px; max-width: 1120px; margin-left: auto; margin-right: auto;
}
.balls-study-page .activity-card { min-height: 0 !important; height: auto !important; padding: 24px 22px !important; }
.balls-study-page .activity-card h3 { margin-bottom: 10px; }
.balls-study-page .activity-card p { margin-bottom: 0; line-height: 1.65; }

.balls-study-page .why-grid { justify-content: center; align-items: start; }
.balls-study-page .why-card { min-height: 0; height: auto; }
.balls-study-page .season-grid { align-items: start; }
.balls-study-page .season-card { min-height: 0; height: auto; }

/* Theme-matched footer. */
.balls-study-page footer { background: var(--balls-navy); color: #f8fbff; border-top: 5px solid var(--balls-yellow); }
.balls-study-page footer h3,
.balls-study-page footer h4 { color: #fff; }
.balls-study-page footer p,
.balls-study-page footer li,
.balls-study-page footer a { color: rgba(255,255,255,.86); }
.balls-study-page footer a:hover { color: var(--balls-yellow); }
.balls-study-page .footer-bottom { border-top-color: rgba(255,255,255,.18); }
.balls-study-page .footer-bottom p { color: rgba(255,255,255,.72); }

/* =========================================================
   LIGHT: CLEAN FEATHER ICON
   Use an inline SVG so the feather is crisp and consistent
   on Windows, mobile, and every browser without emoji fonts.
========================================================= */
.balls-study-page .icon-light {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
    position: relative !important;
    margin: 0 auto 18px !important;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M17 61 C29 46 39 27 63 15 C67 13 70 14 68 19 C62 39 46 57 22 65' fill='%23dff4ff' stroke='%233d9be9' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M19 64 C33 50 45 35 65 17' fill='none' stroke='%2324476b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M28 51 L19 50 M34 44 L25 41 M41 37 L32 33 M48 31 L40 26 M55 25 L48 20 M61 20 L56 17' fill='none' stroke='%233d9be9' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.balls-study-page .icon-light::before,
.balls-study-page .icon-light::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 1100px) {
    .balls-study-page .activity-grid,
    .balls-study-page .family-connection .balls-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

@media (max-width: 900px) {
    .balls-study-page .featured-study-card { grid-template-columns: 1fr; }
    .balls-study-page .featured-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .balls-study-page .study-hero { padding: 54px 0 64px; }
    .balls-study-page .study-hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
    .balls-study-page .featured-study-card { padding: 16px; border-radius: 24px; }
    .balls-study-page .featured-highlights { grid-template-columns: 1fr 1fr; }
    .balls-study-page .section-title { margin-bottom: 46px; }
    .balls-study-page .section-title h2 { font-size: 2.15rem; }
    .balls-study-page .activity-grid,
    .balls-study-page .family-connection .balls-family-grid { grid-template-columns: 1fr; max-width: 440px; }
}