/* Shared styles of the xLights beginner guide pages (xlights-guide.php,
   xlights-layout-guide.php). Accent colours come from the active template
   through theme-bg / theme-color, so nothing here hard-codes the accent. */
/* The banner capitalises every word, which turns "xLights" into "XLights";
   the title is already written in title case. */
.page-title h2, .page-title .breadcrumb-item { text-transform: none !important; }
.xg-wrap { color: #333; }
.xg-wrap h3 { margin-bottom: 14px; }
.xg-wrap h4 { font-size: 19px; margin: 22px 0 10px; }
.xg-wrap p { color: #555; line-height: 1.8; }
.xg-lead { font-size: 17px; }
.xg-ui { display: inline-block; font-weight: 600; color: #1c2f57; background: #eaf1fd;
         border: 1px solid #c9d9f6; border-radius: 4px; padding: 0 6px; line-height: 1.6;
         white-space: nowrap; }
.xg-file { font-family: Consolas, "Courier New", monospace; font-size: .92em; background: #f4f6fa;
           border-radius: 3px; padding: 1px 5px; color: #333; word-break: break-all; }
.xg-pills { margin: 18px 0 4px; }
.xg-pill { display: inline-block; border: 1px solid #e3e6ee; border-radius: 20px; padding: 4px 14px;
           margin: 0 6px 8px 0; font-size: 14px; color: #555; background: #fafbfd; }
.xg-toc { display: flex; flex-wrap: wrap; margin: 6px -6px 0; padding: 0; list-style: none; }
.xg-toc li { width: 33.333%; padding: 6px; }
.xg-toc a { display: flex; align-items: center; border: 1px solid #ececec; border-radius: 10px;
            padding: 12px 14px; color: #333; font-weight: 600; height: 100%; transition: all .2s; }
.xg-toc a:hover { box-shadow: 0 8px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.xg-badge { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; color: #fff;
            font-weight: 800; font-size: 17px; display: inline-flex; align-items: center;
            justify-content: center; margin-right: 12px; }
.xg-stephead { display: flex; align-items: center; margin-bottom: 16px; }
.xg-stephead .xg-badge { width: 54px; height: 54px; min-width: 54px; font-size: 24px; margin-right: 16px; }
.xg-stephead h3 { margin: 0; }
.xg-kicker { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
             font-weight: 700; margin-bottom: 2px; }
.xg-steps { counter-reset: xg; list-style: none; padding: 0; margin: 8px 0 14px; }
.xg-steps > li { counter-increment: xg; position: relative; padding: 10px 0 10px 44px;
                 border-bottom: 1px dashed #e3e6ee; color: #444; line-height: 1.75; }
.xg-steps > li:last-child { border-bottom: none; }
.xg-steps > li:before { content: counter(xg); position: absolute; left: 0; top: 11px; width: 28px;
                        height: 28px; border-radius: 50%; background: #1d2433; color: #fff;
                        font-weight: 700; font-size: 14px; text-align: center; line-height: 28px; }
.xg-steps.xg-from4 { counter-reset: xg 3; }
.xg-note { border-radius: 8px; padding: 14px 18px 14px 58px; margin: 16px 0; position: relative;
           line-height: 1.7; color: #444; }
.xg-note strong.xg-t { display: block; color: #1d2433; margin-bottom: 2px; }
.xg-note:before { position: absolute; left: 16px; top: 14px; width: 28px; height: 28px;
                  border-radius: 50%; color: #fff; font-weight: 800; text-align: center;
                  line-height: 28px; font-size: 15px; }
.xg-tip  { background: #e7f6ee; border-left: 4px solid #22a06b; }
.xg-tip:before  { content: "\2713"; background: #22a06b; }
.xg-warn { background: #fdecec; border-left: 4px solid #d64545; }
.xg-warn:before { content: "!"; background: #d64545; }
.xg-info { background: #eaf1fd; border-left: 4px solid #2f6fde; }
.xg-info:before { content: "i"; background: #2f6fde; font-family: Georgia, serif; }
.xg-figure { border: 1px solid #ececec; border-radius: 10px; padding: 14px; margin: 16px 0 8px;
             background: #fff; overflow-x: auto; }
.xg-figure svg { display: block; width: 100%; height: auto; min-width: 480px; }
.xg-caption { font-size: 13px; color: #888; text-align: center; margin-top: 6px; }
.xg-grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.xg-grid > div { width: 50%; padding: 8px; }
.xg-card { border: 1px solid #ececec; border-radius: 10px; padding: 16px 18px; height: 100%; }
.xg-card h5 { font-size: 16px; margin-bottom: 6px; }
.xg-card p { font-size: 15px; margin: 0; line-height: 1.7; }
.xg-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.xg-table th { background: #1d2433; color: #fff; padding: 10px 12px; text-align: left; font-weight: 600; }
.xg-table td { padding: 10px 12px; border-bottom: 1px solid #ececec; vertical-align: top;
               color: #555; line-height: 1.7; }
.xg-table tr:nth-child(even) td { background: #fafbfd; }
.xg-table td:first-child { color: #1d2433; width: 30%; }
.xg-check { list-style: none; padding: 0; margin: 0; }
.xg-check li { position: relative; padding: 6px 0 6px 32px; color: #444; }
.xg-check li:before { content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px;
                      border: 2px solid #1c2f57; border-radius: 4px; }
.xg-pdf-btn { margin-top: 6px; }
@media (max-width: 767px) {
    .xg-toc li, .xg-grid > div { width: 100%; }
    .xg-table td:first-child { width: 40%; }
    .admin-panel-card { padding: 22px; }
}