./*
 * LIVE FILE (PRODUCTION)
 *
 * Profile page styles source of truth.
 * When modifying Profile page / `.hk-sp-*` styles, ONLY edit files under:
 *   wp-content/plugins/single-templates-plugin/
 *
 * Do not edit mirrored copies elsewhere unless explicitly requested.
 */

.hk-sp-wrapper{max-width:none;width:100%;margin:0 auto;padding:0 24px;}
.hk-sp-header{padding:20px;background:#fff;display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start;margin:0 0 20px 0;}
.hk-sp-photo{width:100%;aspect-ratio:4/3;background:#ffffff;border:1px solid #ffffff;border-radius:10px;overflow:hidden;}
.hk-sp-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hk-sp-photo.hk-sp-photo--empty{display:flex;align-items:center;justify-content:center;color:transparent;font-size:0.9rem;}
.hk-sp-names h1{margin:0 0 10px 0;font-size:2rem;font-weight:700;color:#111;line-height:1.2;}
.hk-sp-name-lines{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.hk-sp-name-lines li{margin:0;padding:4px 10px;background:#f8f9fa;border:1px solid #eee;border-radius:999px;font-size:0.9rem;color:#444;}
.hk-sp-desc{margin-top:10px;color:#333;line-height:1.8;font-weight:600;}
.hk-sp-desc p{margin:0 0 10px 0;}

/* Header photo carousel (ACF gallery) */
.hk-sp-photo.hk-sp-photo--carousel{position:relative;}
.hk-sp-carousel-track{display:flex;width:100%;height:100%;transform:translateX(0);transition:transform 450ms ease;}
.hk-sp-carousel-slide{flex:0 0 100%;height:100%;}
.hk-sp-photo.hk-sp-photo--carousel img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}

.hk-sp-layout{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start;}
.hk-sp-toc-col{min-width:0;}
.hk-sp-toc-placeholder{display:block;height:0;}
/* TOC pins after Overview is scrolled past; JS toggles fixed state */
.hk-sp-toc{position:relative;background:#fff;border:1px solid #eee;border-radius:10px;padding:12px;max-height:calc(100vh - 24px);overflow:auto;}
.hk-sp-toc.hk-sp-toc--fixed{position:fixed;top:12px;z-index:9999;}
.hk-sp-toc-school{display:flex;gap:8px;align-items:center;margin:0 0 10px 0;padding-bottom:0;border-bottom:0;}
.hk-sp-toc-school--desktop{background:#f8f9fa;border-radius:10px;padding:10px;}
.hk-sp-toc-school img{height:18px;width:18px;object-fit:cover;border-radius:4px;border:1px solid #eee;flex:0 0 auto;}
.hk-sp-toc-school-title{font-weight:700;color:#111;font-size:0.95rem;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hk-sp-toc-title{font-weight:700;color:#111;margin:0 0 10px 0;font-size:0.95rem;}
.hk-sp-toc a{display:flex;gap:8px;align-items:flex-start;text-decoration:none;color:#333;padding:8px 8px;border-radius:8px;font-size:0.9rem;line-height:1.2;}
.hk-sp-toc a:hover{background:#f8f9fa;}
.hk-sp-toc a.hk-sp-active{background:#e8f4f8;border:1px solid #bce0fd;color:#0073aa;}
.hk-sp-toc .dashicons{font-size:18px;line-height:18px;margin-top:1px;color:steelblue;}
.hk-sp-toc-text{display:flex;flex-direction:column;gap:2px;}
.hk-sp-toc-cn{font-weight:600;}
.hk-sp-toc-en{font-size:0.8rem;color:#888;}

.hk-sp-content{min-width:0;}
.hk-sp-section{scroll-margin-top:16px;margin:0 0 22px 0;}
.hk-sp-section-box{border:1px solid #eee;border-radius:12px;background:#fff;padding:0;overflow:hidden;}
.hk-sp-section-title{display:flex;gap:10px;align-items:center;padding:20px;border-bottom:1px solid #eee;background:#fff;}
.hk-sp-section-title .dashicons{font-size:22px;line-height:22px;color:steelblue;margin:0;}
.hk-sp-section-title h2{margin:0;font-size:1.6rem;font-weight:700;color:#111;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.hk-sp-section-title .hk-sp-sub{margin-left:0;color:goldenrod;font-weight:600;font-size:1rem;}
.hk-sp-section-body{padding:16px;}

/* Looser text in specific sections */
#scholarship .hk-sp-section-body,
#mbu .hk-sp-section-body,
#living .hk-sp-section-body{line-height:1.8rem;}

/* Curriculum cards: stack label/value to give values more width */
.hk-sp-curriculum-cards .hk-sp-kv{display:flex;flex-direction:column;gap:0;}
.hk-sp-curriculum-cards .hk-sp-kv-row{display:flex;flex-direction:column;gap:4px;padding:8px 0;}
.hk-sp-curriculum-cards .hk-sp-kv-row + .hk-sp-kv-row{border-top:1px solid #eee;}
.hk-sp-curriculum-cards .hk-sp-kv-row .k{font-weight:600;color:steelblue;}
.hk-sp-card h3.hk-sp-card-title{display:flex;gap:6px;align-items:center;}
.hk-sp-card h3.hk-sp-card-title .dashicons{font-size:18px;line-height:18px;color:steelblue;}
/* Beat Elementor kit paragraph margins (e.g. .elementor-kit-65 p { margin-block-end: 44px; }) */
.hk-sp-wrapper p.hk-sp-curriculum-overview{margin:10px 0 10px 0 !important;}
/* Curriculum overview cards: auto-fit so visible cards fill the row */
.hk-sp-curriculum-cards{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}

.hk-sp-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hk-sp-overview-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;}
.hk-sp-overview-left{height:100%;}
.hk-sp-overview-right{display:flex;flex-direction:column;gap:14px;}
.hk-sp-divider{height:1px;background:#eee;margin:14px 0;}
.hk-sp-overview-group-title{font-weight:700;color:#111;margin:0 0 10px 0;font-size:1rem;}
.hk-sp-card{border:1px solid #eee;border-radius:10px;padding:12px;background:#fff;}
.hk-sp-card h3{margin:0 0 10px 0;font-size:1rem;font-weight:700;color:#111;}
.hk-sp-kv{display:grid;grid-template-columns:100px 1fr;gap:8px 10px;align-items:start;}
.hk-sp-kv.hk-sp-kv--compact{grid-template-columns:84px 1fr;}
.hk-sp-kv.hk-sp-kv--contact{grid-template-columns:60px 1fr;}
.hk-sp-kv .k{color:#666;font-size:0.9rem;}
.hk-sp-kv .v{color:#111;font-size:0.9rem;word-break:break-word;}
.hk-sp-links{display:flex;flex-wrap:wrap;gap:8px;}
.hk-sp-link{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border:1px solid steelblue;border-radius:8px;text-decoration:none;color:steelblue;background:#fff;font-size:0.9rem;}
.hk-sp-link:hover{background:#f0f7fb;}
.hk-sp-contact{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hk-sp-contact .hk-sp-card{padding:12px;}
.hk-sp-empty{padding:14px;border:1px dashed #ddd;border-radius:10px;color:#777;background:#fafafa;}

.hk-sp-relations{display:flex;flex-direction:column;gap:10px;}
.hk-sp-rel{display:flex;gap:12px;align-items:center;border:1px solid #eee;border-radius:10px;padding:10px;text-decoration:none;color:inherit;background:#fff;}
.hk-sp-rel:hover{background:#f8f9fa;}
.hk-sp-rel-img{width:56px;height:56px;border-radius:10px;overflow:hidden;background:#f5f5f5;border:1px solid #eee;flex:0 0 auto;}
.hk-sp-rel-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hk-sp-rel-txt{min-width:0;}
.hk-sp-rel-title{font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hk-sp-rel-sub{color:#666;font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.hk-sp-three-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;}
.hk-sp-four-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px;}
/* Ensure curriculum cards auto-fit on desktop even though .hk-sp-four-grid is defined later */
.hk-sp-four-grid.hk-sp-curriculum-cards{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.hk-sp-acc-stack{display:flex;flex-direction:column;gap:12px;}

.hk-sp-two-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.hk-sp-price-list{border:1px solid #eee;border-radius:10px;overflow:hidden;background:#fff;}
.hk-sp-price-row{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:10px 12px;border-bottom:1px solid #eee;}
.hk-sp-price-row:last-child{border-bottom:0;}
.hk-sp-price-label{font-weight:600;color:#333;}
.hk-sp-price-value{color:#111;}
.hk-sp-price-desc{color:#666;font-size:0.9rem;margin-top:4px;}

/* Fees list style (match Fees-by-Group-Repeater.php) */
.hk-sp-wrapper .fees-list-container{line-height:1.8;}
.hk-sp-wrapper .fees-list-item{margin-bottom:20px;}
.hk-sp-wrapper .fees-list-main{display:flex;align-items:baseline;white-space:nowrap;}
.hk-sp-wrapper .fees-list-main .grade-text{font-size:0.9rem;font-weight:600;color:#111;margin-right:5px;flex-shrink:0;}
.hk-sp-wrapper .fees-list-main .dotted-line{flex:1;margin:0 5px;height:1px;min-width:20px;border-bottom:1px dotted #666;}
.hk-sp-wrapper .fees-list-main .fees-text{font-size:0.9rem;font-weight:600;color:steelblue;flex-shrink:0;}
.hk-sp-wrapper .fees-list-description{font-size:0.8rem;color:#666;margin-top:10px;margin-left:0;margin-bottom:15px;}

.hk-sp-bottom-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:18px 0 0 0;padding:12px;border:1px solid #eee;border-radius:10px;background:#fff;}
.hk-sp-bottom-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid steelblue;border-radius:8px;text-decoration:none;color:steelblue;background:#fff;font-size:0.9rem;}
.hk-sp-bottom-nav a:hover{background:#f0f7fb;}
.hk-sp-bottom-nav .hk-sp-bottom-nav--disabled{opacity:0.45;border-style:dashed;pointer-events:none;}

@media (max-width: 960px), (max-device-width: 960px){
    .hk-sp-layout{grid-template-columns:1fr;}
    .hk-sp-toc{position:sticky;top:0;z-index:50;overflow:visible;white-space:normal;max-height:none;}
    .hk-sp-toc-desktop{display:none;}
    .hk-sp-toc-mobile{display:block;}
    .hk-sp-toc-mobile .hk-sp-acc-body{padding:8px 10px;}
    .hk-sp-toc-links{display:flex;flex-direction:column;gap:0;}
    .hk-sp-toc a{display:flex;margin:0;}
    .hk-sp-toc-school--desktop{display:none;}
    .hk-sp-toc-school--mobile{display:flex;}

    .hk-sp-toc-mobile summary{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:10px;border-bottom:0;}
    .hk-sp-toc-mobile[open] summary{background:#fff;}
    .hk-sp-toc-mobile .hk-sp-acc-body{padding:8px 10px;max-height:calc(100vh - 64px);overflow:auto;}

    .hk-sp-toc-school--mobile{margin:0;padding:0;border:0;}

    /* Increase specificity to beat Elementor button styles */
    .hk-sp-wrapper .hk-sp-toc details.hk-sp-toc-mobile summary button.hk-sp-toc-toggle{
        appearance:none !important;
        -webkit-appearance:none !important;
        border:1px solid #eee !important;
        background:#fff !important;
        border-radius:999px !important;
        padding:6px 10px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        cursor:pointer !important;
        color:#111 !important;
        font:inherit !important;
        line-height:1 !important;
        margin:0 !important;
        text-transform:none !important;
        box-shadow:none !important;
    }
    .hk-sp-wrapper .hk-sp-toc details.hk-sp-toc-mobile summary button.hk-sp-toc-toggle:hover{background:#f8f9fa !important;}
    .hk-sp-wrapper .hk-sp-toc details.hk-sp-toc-mobile summary button.hk-sp-toc-toggle .dashicons{margin:0;color:steelblue;}
    .hk-sp-toc-mobile[open] .hk-sp-toc-toggle-icon{transform:rotate(180deg);}
    .hk-sp-four-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 820px){
    .hk-sp-photo.hk-sp-photo--empty{display:none;}
    .hk-sp-wrapper{padding:0 12px;}
    .hk-sp-header{grid-template-columns:1fr;}
    .hk-sp-overview-grid{grid-template-columns:1fr;}
    .hk-sp-overview-layout{grid-template-columns:1fr;}
    .hk-sp-contact{grid-template-columns:1fr;}
    .hk-sp-three-grid{grid-template-columns:1fr;}
    .hk-sp-two-grid{grid-template-columns:1fr;}
    .hk-sp-four-grid{grid-template-columns:1fr;}
    .hk-sp-price-row{grid-template-columns:1fr;}

    /* Mobile typography (no global clamp) */
    .hk-sp-wrapper h1{font-size:1.5rem !important;}
    .hk-sp-wrapper h2{font-size:1.1rem !important;}
    .hk-sp-wrapper h3{font-size:1rem !important;}
    .hk-sp-wrapper h4{font-size:1rem !important;}
    .hk-sp-wrapper h5{font-size:0.9rem !important;}
    .hk-sp-wrapper .hk-sp-name-lines li{font-size:0.75rem !important;}
    .hk-sp-wrapper .hk-sp-desc p{font-size:0.9rem !important;}
    .hk-sp-wrapper .hk-sp-toc-school-title{font-size:1.1rem !important;}
    .hk-sp-wrapper .hk-sp-kv .k{font-size:0.9rem !important;width:100px !important;}

    /* Mobile: remove TOC outer padding */
    .hk-sp-toc{padding:0 !important;}

    /* Mobile: remove accordion summary background */
    .hk-sp-acc summary{background:transparent !important;}

    /* Keep icons legible (icons are font glyphs; exempt from the text clamp) */
    .hk-sp-wrapper .dashicons{font-size:18px !important;line-height:18px !important;}
    .hk-sp-toc .dashicons{font-size:18px !important;line-height:18px !important;}

    .hk-sp-section-body{line-height:1.6;}
    .hk-sp-section-title{padding:14px;}
    .hk-sp-section h4{padding-left:20px;}
    .hk-sp-section h5{padding-left:20px;}

    /* Make kv content wider on mobile (smaller label column + tighter gaps) */
    .hk-sp-kv{grid-template-columns:100px 1fr;gap:6px 10px;}
    .hk-sp-kv.hk-sp-kv--compact{grid-template-columns:100px 1fr;}
    .hk-sp-kv.hk-sp-kv--contact{grid-template-columns:100px 1fr;}

    /* Fees list mobile tweaks */
    .hk-sp-wrapper .fees-list-main .dotted-line{margin:0 3px;min-width:10px;}
}

/* TOC: desktop vs mobile (avoid overriding mobile media queries) */
@media (min-width: 961px){
    .hk-sp-toc-desktop{display:block;}
    .hk-sp-toc-mobile{display:none;}
    .hk-sp-toc-school--mobile{display:none;}
    .hk-sp-toc-school--desktop{display:flex;}
}
.hk-sp-section h4{margin:20px 0 10px 0;font-size:1.2rem;font-weight:600;color:#333;position:relative;padding-left:26px;}
.hk-sp-section h5{margin:15px 0 8px 0;font-size:1.05rem;font-weight:600;color:#555;position:relative;padding-left:24px;}
.hk-sp-section h4::before{content:"\f345";font-family:dashicons;position:absolute;left:0;top:0;color:steelblue;}
.hk-sp-section h5::before{content:"\f139";font-family:dashicons;position:absolute;left:0;top:0;color:steelblue;opacity:0.9;}

/* Clearer separation between sub-sections: add extra top margin starting from the 2nd heading */
.hk-sp-section-body * + h4{margin-top:28px;}
.hk-sp-section-body * + h5{margin-top:22px;}

/* Bullet lists: remove excessive indent and add dotted dividers between items */
.hk-sp-section-body ul:not(.hk-sp-name-lines),
.hk-sp-section-body ol{padding-left:0;margin-left:0;list-style-position:inside;}
.hk-sp-section-body ul:not(.hk-sp-name-lines) li,
.hk-sp-section-body ol li{padding:8px 0;margin:0;}
.hk-sp-section-body ul:not(.hk-sp-name-lines) li+li,
.hk-sp-section-body ol li+li{border-top:1px dotted #ddd;}

/* Details accordion (no JS dependency) */
.hk-sp-acc{border:1px solid #eee;border-radius:10px;background:#fff;overflow:hidden;}
.hk-sp-acc summary{list-style:none;cursor:pointer;padding:12px 14px;background:#f8f9fa;font-weight:600;}
.hk-sp-acc summary::-webkit-details-marker{display:none;}
.hk-sp-acc[open] summary{background:#eef6ff;}
.hk-sp-acc-body{padding:12px 14px;}