/*
 * APCO Post FAQ – the site's standard FAQ section (the /solutions/ design).
 * Every widget instance renders identically from this one file; instances
 * carry no custom CSS. Fonts and the chevron pattern are site assets that
 * load on every page via the Elementor kit.
 * Descendant selectors are prefixed with .apco-pfaq (two classes) so they
 * outrank the kit's element rules like `.elementor-kit-6 h2 {font-size:50px}`.
 * Breakpoints follow the site: tablet <=1024, mobile <=767, sticky >=1025.
 */

.apco-pfaq{position:relative;padding:100px 20px;}
.apco-pfaq::before{content:"";position:absolute;inset:0;background:url("/wp-content/uploads/2025/07/bg-Apco-Defense-Security.webp") 50% 100% repeat;opacity:.16;pointer-events:none;}
.apco-pfaq .apco-pfaq-in{position:relative;z-index:1;max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:64px;}

/* intro column */
.apco-pfaq .apco-pfaq-intro{width:36%;min-width:0;padding-right:40px;box-sizing:border-box;}
/* The kit's body{overflow-x:hidden} would make body a scroll container and kill
   the sticky intro; clip clips without scrolling. .apco-has-pfaq is added by the
   plugin's body_class filter on any page whose apco_faq meta has items. */
@media (min-width:1025px){
	body.apco-has-pfaq{overflow-x:clip;}
	.apco-pfaq .apco-pfaq-intro{position:sticky;top:190px;}
}
.apco-pfaq .apco-pfaq-eyebrow{display:inline-block;font-family:'Babes Neue',sans-serif;font-weight:400;font-size:26px;line-height:1.1;letter-spacing:1px;text-transform:uppercase;color:#E89C33;padding-bottom:8px;border-bottom:1px solid #E89C33;margin:0 0 22px;}
.apco-pfaq .apco-pfaq-h{margin:0;font-family:'Babes Neue',sans-serif;font-weight:400;font-size:72px;line-height:.98;letter-spacing:0;text-transform:uppercase;background:linear-gradient(to right,#1F3D27,#1F3D27,#1F3D27,#40734E,#40734E,#40734E);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:apco-pfaq-grad 10s ease infinite;}
@keyframes apco-pfaq-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.apco-pfaq .apco-pfaq-rule{width:56px;height:2px;background:#E89C33;margin:26px 0 22px;}
.apco-pfaq .apco-pfaq-lead{max-width:340px;font-family:'monteserrat','Montserrat',sans-serif;font-weight:400;font-size:17px;line-height:1.55;color:#647568;}
.apco-pfaq .apco-pfaq-lead p{margin:0;}

/* accordion column */
.apco-pfaq .apco-pfaq-list{width:64%;min-width:0;counter-reset:apcopfaq;}
.apco-pfaq .apco-pfaq-list:only-child{width:100%;}
.apco-pfaq .apco-pfaq-item{counter-increment:apcopfaq;overflow:hidden;background:#FFFFFF;border:1px solid #E3E6E0;border-radius:8px;margin:0 0 12px;transition:border-color .25s ease,box-shadow .25s ease;interpolate-size:allow-keywords;}
.apco-pfaq .apco-pfaq-item:last-child{margin-bottom:0;}
.apco-pfaq .apco-pfaq-item:hover{border-color:#B7C9BB;box-shadow:0 10px 30px rgba(24,34,33,.06);}
.apco-pfaq .apco-pfaq-item[open]{border-color:#9DB8A4;}
.apco-pfaq .apco-pfaq-item>summary{display:flex;align-items:center;gap:18px;padding:22px 24px;cursor:pointer;list-style:none;}
.apco-pfaq .apco-pfaq-item>summary::-webkit-details-marker{display:none;}
.apco-pfaq .apco-pfaq-item>summary::before{content:counter(apcopfaq,decimal-leading-zero);flex:0 0 auto;min-width:34px;font-family:'Babes Neue',sans-serif;font-weight:400;font-size:26px;line-height:1;color:#E89C33;padding-right:18px;border-right:1px solid rgba(24,34,33,.14);}
.apco-pfaq .apco-pfaq-q{flex:1 1 auto;margin:0;font-family:'monts medium menu','Montserrat',sans-serif;font-weight:500;font-size:18px;line-height:1.4;color:#182221;transition:color .2s ease;}
.apco-pfaq .apco-pfaq-item>summary:hover .apco-pfaq-q{color:#40734E;}
.apco-pfaq .apco-pfaq-ic{flex:0 0 auto;margin-left:16px;display:flex;align-items:center;}
.apco-pfaq .apco-pfaq-ic svg{height:16px;width:auto;fill:#E89C33;display:block;}
.apco-pfaq .apco-pfaq-ic .i-minus{display:none;}
.apco-pfaq .apco-pfaq-item[open] .apco-pfaq-ic .i-plus{display:none;}
.apco-pfaq .apco-pfaq-item[open] .apco-pfaq-ic .i-minus{display:block;}

/* answer panel */
.apco-pfaq .apco-pfaq-a{background:#F5F6F2;border-top:1px solid #E3E6E0;padding:20px 28px 26px 82px;font-family:'monteserrat','Montserrat',sans-serif;font-weight:400;font-size:15px;line-height:1.6;color:#647568;}
.apco-pfaq .apco-pfaq-a p{margin:0 0 .9em;font-size:inherit;color:inherit;font-family:inherit;line-height:inherit;}
.apco-pfaq .apco-pfaq-a p:last-child{margin-bottom:0;}
.apco-pfaq .apco-pfaq-a a{color:#2F7D53;text-decoration:underline;}
.apco-pfaq .apco-pfaq-a ul,.apco-pfaq .apco-pfaq-a ol{margin:.4em 0 .9em;padding-left:1.2em;}
.apco-pfaq .apco-pfaq-a li{margin:0 0 .35em;}

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

/* tablet */
@media (max-width:1024px){
	.apco-pfaq{padding:72px 20px;}
	.apco-pfaq .apco-pfaq-in{flex-direction:column;gap:40px;}
	.apco-pfaq .apco-pfaq-intro{width:100%;padding-right:0;}
	.apco-pfaq .apco-pfaq-list{width:100%;}
	.apco-pfaq .apco-pfaq-h{font-size:56px;}
	.apco-pfaq .apco-pfaq-lead{max-width:560px;}
	.apco-pfaq .apco-pfaq-item>summary{padding:20px;}
	.apco-pfaq .apco-pfaq-q{font-size:17px;}
	.apco-pfaq .apco-pfaq-a{padding:18px 22px 22px 78px;}
}

/* mobile */
@media (max-width:767px){
	.apco-pfaq{padding:56px 16px;}
	.apco-pfaq .apco-pfaq-in{gap:32px;}
	.apco-pfaq .apco-pfaq-eyebrow{font-size:22px;margin-bottom:16px;}
	.apco-pfaq .apco-pfaq-h{font-size:44px;}
	.apco-pfaq .apco-pfaq-rule{margin:18px 0 16px;}
	.apco-pfaq .apco-pfaq-lead{max-width:100%;font-size:16px;}
	.apco-pfaq .apco-pfaq-item>summary{padding:16px;gap:12px;}
	.apco-pfaq .apco-pfaq-item>summary::before{font-size:22px;padding-right:12px;min-width:28px;}
	.apco-pfaq .apco-pfaq-q{font-size:15px;}
	.apco-pfaq .apco-pfaq-ic{margin-left:10px;}
	.apco-pfaq .apco-pfaq-a{padding:16px 18px 18px 18px;font-size:14px;}
}
