/*
 * APCO Key Takeaways – the collapsible box on Knowledge Lab posts.
 * Replicates the original template-built box: #F2F2F0 fill, 3px orange left
 * rule, Babes Neue heading with a +/– indicator, Montserrat list.
 * Descendant selectors are prefixed with .apco-ptk (two classes) so they
 * outrank the kit's element rules like `.elementor-kit-6 h2 {font-size:50px}`.
 */

.apco-ptk{background:#F2F2F0;border-left:3px solid #E89C33;padding:22px 28px 24px;interpolate-size:allow-keywords;}
.apco-ptk>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;}
.apco-ptk>summary::-webkit-details-marker{display:none;}
.apco-ptk .apco-ptk-h{margin:0;font-family:'Babes Neue',sans-serif;font-weight:400;font-size:24px;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:#182221;}
.apco-ptk .apco-ptk-ic::before{content:"+";display:block;color:#E89C33;font-size:26px;line-height:1;}
.apco-ptk[open]>summary .apco-ptk-ic::before{content:"–";}

/* Body styles target bare elements: since v2 the fragment comes from the
 * metabox editor (plain <ul>/<ol>/<p>), and the legacy .apco-ptk-list <ul>
 * matches the same rules. */
.apco-ptk .apco-ptk-body{padding-top:12px;font-family:'monteserrat','Montserrat',sans-serif;font-weight:400;font-size:16px;line-height:1.75;color:#3F4A45;}
.apco-ptk .apco-ptk-body p{margin:0 0 10px;}
.apco-ptk .apco-ptk-body p:last-child{margin-bottom:0;}
.apco-ptk .apco-ptk-body ul,
.apco-ptk .apco-ptk-body ol{margin:0;padding:0 0 0 20px;}
.apco-ptk .apco-ptk-body ul{list-style:disc;}
.apco-ptk .apco-ptk-body li{margin:0 0 8px;}
.apco-ptk .apco-ptk-body li:last-child{margin-bottom:0;}
.apco-ptk .apco-ptk-body li::marker{color:#E89C33;}
.apco-ptk .apco-ptk-body a{color:#2F7D53;text-decoration:underline;}

/* open/close animation where ::details-content is supported; elsewhere it toggles instantly */
.apco-ptk::details-content{block-size:0;overflow:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete;}
.apco-ptk[open]::details-content{block-size:auto;}

/* mobile */
@media (max-width:767px){
	.apco-ptk{padding:18px 20px 20px;}
	.apco-ptk .apco-ptk-h{font-size:22px;}
	.apco-ptk .apco-ptk-body{font-size:15px;}
}