/* ============================================================
   Cloudeli — FAQ / disclosure accordion
   Native <details> + <summary>, so questions open and close with
   no JavaScript at all. Replaces the old ul.accordion markup,
   which only became interactive once main.js bound a jQuery
   click handler — if that never ran, the questions rendered as
   clickable cards that did nothing.

   Styling intentionally matches the previous .faq .accordion and
   .ce-domains .accordion rules so nothing changes visually.
   ============================================================ */

.cl-acc{max-width:880px;margin:0 auto;}

.cl-acc-item{
	background:#fff;border:1px solid var(--line);border-radius:14px;
	margin-bottom:14px;box-shadow:var(--shadow-sm);
	transition:box-shadow .3s ease;
}
.cl-acc-item:last-child{margin-bottom:0;}
.cl-acc-item:hover{box-shadow:var(--shadow);}

.cl-acc-item > summary{
	display:block;position:relative;cursor:pointer;
	padding:20px 58px 20px 24px;
	font-weight:600;font-size:16px;line-height:1.5;color:var(--ink);
	list-style:none;
	transition:color .2s ease;
}
/* Suppress the native disclosure triangle in every engine. */
.cl-acc-item > summary::-webkit-details-marker{display:none;}
.cl-acc-item > summary::marker{content:"";}

.cl-acc-item > summary::after{
	content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
	width:30px;height:30px;border-radius:50%;
	background:rgba(26,118,209,.10);color:var(--brand);
	display:flex;align-items:center;justify-content:center;
	font-size:20px;font-weight:600;line-height:1;
	transition:background .3s ease,color .3s ease;
}
.cl-acc-item > summary:hover{color:var(--brand);}
.cl-acc-item > summary:hover::after{background:rgba(26,118,209,.16);}
.cl-acc-item > summary:focus-visible{
	outline:2px solid var(--brand);outline-offset:-2px;border-radius:14px;
}
.cl-acc-item[open] > summary{color:var(--brand);}
.cl-acc-item[open] > summary::after{content:"\2212";background:var(--grad);color:#fff;}

.cl-acc-a{padding:0 24px 22px;}
.cl-acc-a p{margin:0;color:var(--body);line-height:1.85;font-size:15px;}
.cl-acc-a p + p{margin-top:12px;}
.cl-acc-a a{color:var(--brand);font-weight:600;}

@media (prefers-reduced-motion:no-preference){
	.cl-acc-a{animation:clAccOpen .28s ease;}
	@keyframes clAccOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
}

@media (max-width:575px){
	.cl-acc-item > summary{padding:17px 52px 17px 18px;font-size:15px;}
	.cl-acc-item > summary::after{right:14px;width:27px;height:27px;font-size:18px;}
	.cl-acc-a{padding:0 18px 18px;}
}

/* ------------------------------------------------------------
   Cyber Essentials "9 domains" variant — carries a domain
   reference (A.1 …) in the summary and a "how we help" note
   in the body.
   ------------------------------------------------------------ */
.ce-domains .cl-acc-item{margin-bottom:12px;}
.ce-domains .cl-acc-item > summary{padding:18px 56px 18px 22px;}
.ce-domains .cl-acc-item > summary .dnum{
	display:inline-block;min-width:42px;color:var(--brand);font-weight:800;
}
.ce-domains .cl-acc-item[open] > summary .dnum{color:var(--brand-dark);}
.ce-domains .cl-acc-a{padding:0 22px 20px;}
.ce-domains .cl-acc-a .help{
	display:block;margin-top:10px;padding-top:10px;
	border-top:1px dashed var(--line);
	color:var(--brand);font-weight:600;font-size:14px;
}
.ce-domains .cl-acc-a .help i{margin-right:6px;}