/* Developing Themes Dot - Noderyx Visual Builder widget styles.
   Loaded after /public/builder-content.css on published posts and pages, and inside the
   builder's editing canvas. Selectors are wrapped in :where() to stay at or below the
   specificity of each widget's own settings (color, background, padding, radius), so
   anything set in the builder's style panel still wins. Colors use the theme's tokens,
   so widgets follow the light/dark toggle. */

/* Builder canvas: the canvas has no .site-body, so give it the theme's tokens and paper. */
body.is-editing,body.is-preview{--ink:#171b19;--muted:#606b65;--line:#d9dfd7;--paper:#f7f8f2;--white:#fff;--blue:#235be2;--green:#d3efb1;--orange:#f47a3b;background:var(--paper);color:var(--ink);font:18px/1.8 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.is-editing .nvb-content:hover{outline-color:var(--blue)}.is-editing .chosen{outline-color:var(--blue)}

/* Base typography: the theme's tight, heavy headings. */
:where(.nvb-content) h2,:where(.nvb-content) h3{font-weight:800;letter-spacing:-.04em;line-height:1.15}
:where(.nvb-content) h2{font-size:clamp(28px,3.4vw,38px)}
:where(.nvb-content) h3{font-size:22px;letter-spacing:-.6px}
:where(.nvb-content) ul{padding-left:22px}:where(.nvb-content) li::marker{color:var(--orange)}

/* Buttons: the theme's black hero button, blue in dark mode. */
.nvb-button{background:#191e1a;border-radius:5px;padding:13px 24px;font:650 13px/1.5 ui-sans-serif,system-ui,sans-serif;transition:transform .2s,background-color .2s}
.nvb-button:hover{transform:translateY(-3px)}
html[data-color=dark] .nvb-button{background:var(--blue)}

/* Hero: the green banner with an ink rule, like the home page. */
:where(.nvb-content[data-widget=hero]){background-color:var(--green);border-bottom:1px solid var(--ink)}
:where(.nvb-content[data-widget=hero]) h2{font-size:clamp(38px,5vw,64px);line-height:1.03;letter-spacing:-.05em;margin-bottom:.4em}
:where(.nvb-content[data-widget=hero]) p{font-size:16px;opacity:.75}

/* Heading: the theme's orange dot, inline so it follows the widget's alignment. */
:where(.nvb-content[data-widget=heading]) h2::before{content:'';display:inline-block;width:9px;height:9px;margin-right:.45em;vertical-align:.18em;border-radius:50%;background:var(--orange)}

/* Quote and testimonial: orange rule, upright text. */
:where(.nvb-content) .nvb-quote{border-left-color:var(--orange);font-style:normal;font-size:1.2em;line-height:1.55;letter-spacing:-.3px}
:where(.nvb-content[data-widget=quote]) span,:where(.nvb-content) .nvb-person span{font:11px/1.6 ui-monospace,monospace;color:var(--muted);letter-spacing:.5px;opacity:1}
:where(.nvb-content[data-widget=testimonial]){background-color:var(--white);border:1px solid var(--line)}

:where(.nvb-content) .nvb-divider{background:var(--line);opacity:1}

/* Cards and boxes: white panels with the theme's hairline borders. */
:where(.nvb-content[data-widget=card],.nvb-content[data-widget=icon-box],.nvb-content[data-widget=team],.nvb-content[data-widget=counter]){background-color:var(--white);border:1px solid var(--line);transition:transform .2s,border-color .2s}
:where(.nvb-content[data-widget=card]:hover,.nvb-content[data-widget=icon-box]:hover){border-color:var(--blue)}
:where(.nvb-content[data-widget=card]) p,:where(.nvb-content[data-widget=icon-box]) p{color:var(--muted);font-size:.85em}
:where(.nvb-content) .nvb-ib-mark{width:34px;height:34px;border-radius:6px;background:var(--orange);opacity:1}
:where(.nvb-content[data-widget=counter]) strong{color:var(--blue);font-weight:800;letter-spacing:-.04em}
:where(.nvb-content[data-widget=counter]) span{font:11px/1.6 ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase}
:where(.nvb-content[data-widget=team]) .nvb-image{border:3px solid var(--green)}

/* Call to action: the blue sidebar-note block with an orange button. */
:where(.nvb-content[data-widget=cta]){background-color:var(--blue);color:#fff}
:where(.nvb-content[data-widget=cta]) h2{color:inherit}
.nvb-content[data-widget=cta] .nvb-button{background:var(--orange);color:#191e1a!important}

/* Alert: a green notice with an orange rule. */
:where(.nvb-content[data-widget=alert]){background-color:var(--green);border-left-color:var(--orange)}

/* Progress, social, accordion, tabs. */
:where(.nvb-content) .nvb-progress-track{background:var(--line)}
:where(.nvb-content) .nvb-progress-label{font:600 12px/1.6 ui-monospace,monospace}
:where(.nvb-content) .nvb-social a{border-color:var(--line);background:var(--white);font-size:13px}
:where(.nvb-content) .nvb-social a:hover{border-color:var(--blue);color:var(--blue)}
:where(.nvb-content) .nvb-accordion-label{border-color:var(--line);background:var(--white);border-radius:6px}
:where(.nvb-content[data-widget=accordion]) input:checked+.nvb-accordion-label,:where(.nvb-content[data-widget=accordion]) input:checked+.nvb-accordion-label+.nvb-accordion-panel{border-color:var(--ink)}
:where(.nvb-content[data-widget=accordion]) input:checked+.nvb-accordion-label+.nvb-accordion-panel{background:var(--white)}
:where(.nvb-content[data-widget=accordion]) input:focus-visible+.nvb-accordion-label,:where(.nvb-content[data-widget=tabs]) input:focus-visible+.nvb-tab-label{outline:3px solid var(--blue);outline-offset:3px}
:where(.nvb-content) .nvb-tab-label{font-size:14px}
:where(.nvb-content[data-widget=tabs]) input:checked+.nvb-tab-label{border-color:var(--orange)}

/* Pricing and table: white panels; the table header uses the theme green. */
:where(.nvb-content) .nvb-pricing{border-color:var(--line);background:var(--white);border-radius:6px}
:where(.nvb-content) .nvb-pricing .nvb-price{color:var(--blue);letter-spacing:-.04em}
:where(.nvb-content) .nvb-pricing li{border-top-color:var(--line)}
:where(.nvb-content) .nvb-table{background:var(--line);border-color:var(--line);border-radius:6px}
:where(.nvb-content) .nvb-cell{background:var(--white);color:var(--ink)}
:where(.nvb-content) .nvb-cell-head{background:var(--green);font:700 12px/1.6 ui-monospace,monospace;letter-spacing:.5px}

/* Media: the code-editor dark panel for video, theme radii for the gallery. */
:where(.nvb-content) .nvb-video,:where(.nvb-content) .nvb-video-link{background:#1c2421}
:where(.nvb-content) .nvb-video-link{color:#d3efb1;font:600 13px/1.5 ui-monospace,monospace}
:where(.nvb-content) .nvb-caption{color:var(--muted);opacity:1;font:11px/1.6 ui-monospace,monospace}
:where(.nvb-content) .nvb-gallery img{border-radius:6px}

/* Icon list, rating, countdown. */
:where(.nvb-content) .nvb-icon-list li::before{background:var(--green);opacity:1}
:where(.nvb-content) .nvb-icon-list li::after{border-color:var(--ink)}
:where(.nvb-content) .nvb-star{color:var(--line)}
:where(.nvb-content) .nvb-star.is-full{color:var(--orange)}
:where(.nvb-content) .nvb-star.is-half{background:linear-gradient(90deg,var(--orange) 50%,var(--line) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
:where(.nvb-content) .nvb-cd-title{font-family:ui-monospace,monospace;letter-spacing:1.5px}
:where(.nvb-content) .nvb-cd-unit{border-color:var(--line);background:var(--white);border-radius:6px}
:where(.nvb-content) .nvb-cd-unit strong{font-family:ui-monospace,monospace;color:var(--blue)}

/* Builder hover effects use the theme blue instead of the core green. */
.nvb-content.nvb-hover-glow:hover{box-shadow:0 0 0 3px rgba(35,91,226,.35),0 12px 32px rgba(35,91,226,.2)}

@media(prefers-reduced-motion:reduce){.nvb-button{transition:none}.nvb-button:hover{transform:none}}

/* Code samples: a Text widget with the "code-sample" CSS class renders as a monospaced,
   horizontally scrollable code block. Fixed dark colors keep contrast in both modes. */
.nvb-content.code-sample{background-color:#1c2421;color:#d7e2dc;border:1px solid #2f3b35;overflow-x:auto;overflow-wrap:normal;-webkit-overflow-scrolling:touch}
.nvb-content.code-sample p{white-space:pre;margin:0;font:14px/1.75 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;overflow-wrap:normal;word-break:normal;tab-size:2}
@media(max-width:480px){.nvb-content.code-sample p{font-size:12.5px}}