/* ===========================================================
   NatterFly Help Article
   =========================================================== */

.how-to-article-hero{
    padding:48px 0;
}

.how-to-breadcrumbs{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    font-size:.95rem;
    color:#dbeef5;
}

.how-to-breadcrumbs a{
    color:#fff;
    text-decoration:none;
}

.how-to-breadcrumbs a:hover{
    text-decoration:underline;
}

.how-to-article-labels{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
    flex-wrap:wrap;
}

.how-to-article-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:30px;
    margin:35px 0 50px;
    align-items:start;
}

.how-to-article-main,
.how-to-article-side-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:4px;
    box-sizing:border-box;
}

.how-to-article-main{
    overflow:hidden;
}

.how-to-article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    padding:18px 28px;
    border-bottom:1px solid var(--border);
    background:var(--surface-muted);
    color:var(--text-muted);
    font-size:.92rem;
}

.how-to-article-meta span{
    display:flex;
    align-items:center;
    gap:7px;
}

.how-to-article-meta a{
    color:var(--header-light);
    text-decoration:none;
    font-weight:600;
}

.how-to-article-body{
    padding:30px;
    color:var(--text);
    line-height:1.9;
    font-size:1.04rem;
}

.how-to-article-body h2,
.how-to-article-body h3,
.how-to-article-body h4{
    color:var(--text);
    margin:35px 0 15px;
}

.how-to-article-body p{
    margin:0 0 18px;
}

.how-to-article-body ul,
.how-to-article-body ol{
    margin:0 0 22px 24px;
}

.how-to-article-body li{
    margin:8px 0;
}

.how-to-article-body img{
    max-width:100%;
    border:1px solid var(--border);
    border-radius:4px;
    display:block;
    margin:20px auto;
}

.how-to-article-body table{
    width:100%;
    border-collapse:collapse;
    margin:25px 0;
}

.how-to-article-body th{
    background:var(--header-light);
    color:#fff;
}

.how-to-article-body th,
.how-to-article-body td{
    padding:12px;
    border:1px solid var(--border);
}

.how-to-article-body td{
    background:var(--surface);
    color:var(--text);
}

.how-to-article-body tbody tr:nth-child(even) td{
    background:var(--surface-muted);
}

.how-to-article-body pre{
    background:#16232d;
    color:#f1f5f8;
    padding:18px;
    border:1px solid var(--border-dark);
    border-radius:4px;
    overflow:auto;
}

.how-to-article-body code{
    font-family:Consolas,monospace;
}

.how-to-article-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    padding:25px 30px 30px;
    border-top:1px solid var(--border);
}

.how-to-article-sidebar{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.how-to-article-side-card{
    padding:24px;
}

.how-to-article-side-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    background:var(--header-light);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:15px;
}

.how-to-article-side-card h2{
    margin:8px 0 12px;
    color:var(--text);
}

.how-to-article-side-card p,
.how-to-article-side-card li{
    color:var(--text-muted);
}

.how-to-related{
    margin:45px 0;
}

.site-alert{
    border-radius:4px;
    padding:16px 18px;
}

.info-box,
.tip-box,
.warning-box,
.success-box{
    padding:18px;
    margin:22px 0;
    border-left:5px solid;
    border-radius:4px;
    color:var(--text);
}

.info-box{
    background:color-mix(in srgb, var(--surface) 88%, #2196f3 12%);
    border-color:#2196f3;
}

.tip-box{
    background:color-mix(in srgb, var(--surface) 88%, #2e7d32 12%);
    border-color:#2e7d32;
}

.warning-box{
    background:color-mix(in srgb, var(--surface) 88%, #ff9800 12%);
    border-color:#ff9800;
}

.success-box{
    background:color-mix(in srgb, var(--surface) 88%, #4caf50 12%);
    border-color:#4caf50;
}

[data-theme="dark"] .how-to-article-meta a{
    color:#72c8e3;
}

[data-theme="dark"] .how-to-article-side-icon{
    background:var(--header);
}

[data-theme="dark"] .how-to-article-body pre{
    background:#101a20;
}

@media (max-width:1000px){
    .how-to-article-layout{
        grid-template-columns:1fr;
    }
}

@media (max-width:700px){
    .how-to-article-body{
        padding:22px;
    }

    .how-to-article-actions{
        padding:22px;
        flex-direction:column;
    }

    .how-to-article-actions a{
        width:100%;
        justify-content:center;
    }

    .how-to-article-meta{
        flex-direction:column;
        gap:10px;
    }

    .how-to-breadcrumbs{
        flex-wrap:wrap;
    }
}


/* Utility spacing */
.mt-1{margin-top:1px;}
.mb-1{margin-bottom:1px;}
.mt-2{margin-top:2px;}
.mb-2{margin-bottom:2px;}
.mt-3{margin-top:3px;}
.mb-3{margin-bottom:3px;}
.mt-4{margin-top:4px;}
.mb-4{margin-bottom:4px;}
.mt-5{margin-top:5px;}
.mb-5{margin-bottom:5px;}
.mt-6{margin-top:6px;}
.mb-6{margin-bottom:6px;}
.mt-7{margin-top:7px;}
.mb-7{margin-bottom:7px;}
.mt-8{margin-top:8px;}
.mb-8{margin-bottom:8px;}
.mt-9{margin-top:9px;}
.mb-9{margin-bottom:9px;}
.mt-10{margin-top:10px;}
.mb-10{margin-bottom:10px;}
.mt-11{margin-top:11px;}
.mb-11{margin-bottom:11px;}
.mt-12{margin-top:12px;}
.mb-12{margin-bottom:12px;}
.mt-13{margin-top:13px;}
.mb-13{margin-bottom:13px;}
.mt-14{margin-top:14px;}
.mb-14{margin-bottom:14px;}
.mt-15{margin-top:15px;}
.mb-15{margin-bottom:15px;}
.mt-16{margin-top:16px;}
.mb-16{margin-bottom:16px;}
.mt-17{margin-top:17px;}
.mb-17{margin-bottom:17px;}
.mt-18{margin-top:18px;}
.mb-18{margin-bottom:18px;}
.mt-19{margin-top:19px;}
.mb-19{margin-bottom:19px;}
.mt-20{margin-top:20px;}
.mb-20{margin-bottom:20px;}
.mt-21{margin-top:21px;}
.mb-21{margin-bottom:21px;}
.mt-22{margin-top:22px;}
.mb-22{margin-bottom:22px;}
.mt-23{margin-top:23px;}
.mb-23{margin-bottom:23px;}
.mt-24{margin-top:24px;}
.mb-24{margin-bottom:24px;}
.mt-25{margin-top:25px;}
.mb-25{margin-bottom:25px;}
.mt-26{margin-top:26px;}
.mb-26{margin-bottom:26px;}
.mt-27{margin-top:27px;}
.mb-27{margin-bottom:27px;}
.mt-28{margin-top:28px;}
.mb-28{margin-bottom:28px;}
.mt-29{margin-top:29px;}
.mb-29{margin-bottom:29px;}
.mt-30{margin-top:30px;}
.mb-30{margin-bottom:30px;}
.mt-31{margin-top:31px;}
.mb-31{margin-bottom:31px;}
.mt-32{margin-top:32px;}
.mb-32{margin-bottom:32px;}
.mt-33{margin-top:33px;}
.mb-33{margin-bottom:33px;}
.mt-34{margin-top:34px;}
.mb-34{margin-bottom:34px;}
.mt-35{margin-top:35px;}
.mb-35{margin-bottom:35px;}
.mt-36{margin-top:36px;}
.mb-36{margin-bottom:36px;}
.mt-37{margin-top:37px;}
.mb-37{margin-bottom:37px;}
.mt-38{margin-top:38px;}
.mb-38{margin-bottom:38px;}
.mt-39{margin-top:39px;}
.mb-39{margin-bottom:39px;}
.mt-40{margin-top:40px;}
.mb-40{margin-bottom:40px;}
.mt-41{margin-top:41px;}
.mb-41{margin-bottom:41px;}
.mt-42{margin-top:42px;}
.mb-42{margin-bottom:42px;}
.mt-43{margin-top:43px;}
.mb-43{margin-bottom:43px;}
.mt-44{margin-top:44px;}
.mb-44{margin-bottom:44px;}
.mt-45{margin-top:45px;}
.mb-45{margin-bottom:45px;}
.mt-46{margin-top:46px;}
.mb-46{margin-bottom:46px;}
.mt-47{margin-top:47px;}
.mb-47{margin-bottom:47px;}
.mt-48{margin-top:48px;}
.mb-48{margin-bottom:48px;}
.mt-49{margin-top:49px;}
.mb-49{margin-bottom:49px;}
.mt-50{margin-top:50px;}
.mb-50{margin-bottom:50px;}
.mt-51{margin-top:51px;}
.mb-51{margin-bottom:51px;}
.mt-52{margin-top:52px;}
.mb-52{margin-bottom:52px;}
.mt-53{margin-top:53px;}
.mb-53{margin-bottom:53px;}
.mt-54{margin-top:54px;}
.mb-54{margin-bottom:54px;}
.mt-55{margin-top:55px;}
.mb-55{margin-bottom:55px;}
.mt-56{margin-top:56px;}
.mb-56{margin-bottom:56px;}
.mt-57{margin-top:57px;}
.mb-57{margin-bottom:57px;}
.mt-58{margin-top:58px;}
.mb-58{margin-bottom:58px;}
.mt-59{margin-top:59px;}
.mb-59{margin-bottom:59px;}
.mt-60{margin-top:60px;}
.mb-60{margin-bottom:60px;}
.mt-61{margin-top:61px;}
.mb-61{margin-bottom:61px;}
.mt-62{margin-top:62px;}
.mb-62{margin-bottom:62px;}
.mt-63{margin-top:63px;}
.mb-63{margin-bottom:63px;}
.mt-64{margin-top:64px;}
.mb-64{margin-bottom:64px;}
.mt-65{margin-top:65px;}
.mb-65{margin-bottom:65px;}
.mt-66{margin-top:66px;}
.mb-66{margin-bottom:66px;}
.mt-67{margin-top:67px;}
.mb-67{margin-bottom:67px;}
.mt-68{margin-top:68px;}
.mb-68{margin-bottom:68px;}
.mt-69{margin-top:69px;}
.mb-69{margin-bottom:69px;}
.mt-70{margin-top:70px;}
.mb-70{margin-bottom:70px;}
.mt-71{margin-top:71px;}
.mb-71{margin-bottom:71px;}
.mt-72{margin-top:72px;}
.mb-72{margin-bottom:72px;}
.mt-73{margin-top:73px;}
.mb-73{margin-bottom:73px;}
.mt-74{margin-top:74px;}
.mb-74{margin-bottom:74px;}
.mt-75{margin-top:75px;}
.mb-75{margin-bottom:75px;}
.mt-76{margin-top:76px;}
.mb-76{margin-bottom:76px;}
.mt-77{margin-top:77px;}
.mb-77{margin-bottom:77px;}
.mt-78{margin-top:78px;}
.mb-78{margin-bottom:78px;}
.mt-79{margin-top:79px;}
.mb-79{margin-bottom:79px;}
.mt-80{margin-top:80px;}
.mb-80{margin-bottom:80px;}