/* category_detail.css
   Shared styles for the Web Development, Graphics Design, and Tech Support
   detail pages (templates/ServiceCategoryDetails/).
   Scoped to .service-detail-layout so it never affects .help-center-card
   usage on other pages (Privacy Policy, FAQ, Help Center, Terms). */

/* Registers --border-progress as an animatable percentage so the
   conic-gradient sweep transitions smoothly instead of snapping. */
@property --border-progress {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

.service-detail-layout .help-center-card {
    position: relative;
    border: 2px solid transparent;
    background-image:
        linear-gradient(#0f172a, #0f172a),
        conic-gradient(
            from var(--corner-angle, -45deg),
            rgba(242, 235, 82, 0.95) 0%,
            rgba(242, 235, 82, 0.95) var(--border-progress),
            transparent var(--border-progress),
            transparent calc(100% - var(--border-progress)),
            rgba(242, 235, 82, 0.95) calc(100% - var(--border-progress)),
            rgba(242, 235, 82, 0.95) 100%
        );
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    transition: --border-progress 0.6s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
}

.service-detail-layout .help-center-card:hover {
    --border-progress: 50%; /* each arm grows to 50%, meeting = full 100% loop */
    transform: translateY(-5px);
    box-shadow: 0 0 20px 4px rgba(242, 235, 82, 0.35),
                0 10px 25px rgba(0, 0, 0, 0.15);
}