/*
Theme Name: Novalane
Theme URI: https://novalanestudio.com
Author: Novalane Studio
Description: Block theme for Novalane Studio — fast WordPress sites that answer leads around the clock.
Version: 1.0.3
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: novalane
*/

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--amber); outline-offset: 3px; border-radius: 4px; }
.skip-link:focus { top: 8px; left: 8px; }
p { max-width: 68ch; }
.is-layout-flex > p, .has-text-align-center { max-width: none; }

/* ---------- header ---------- */
.nl-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(10px); background: rgba(20, 33, 61, .92); }
.nl-header a { text-decoration: none; }
.nl-brand { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -.02em; }
.nl-brand .nl-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--wp--preset--color--amber); margin-right: .4em; transform: translateY(-.05em); box-shadow: 0 0 0 4px rgba(255, 200, 87, .18); }
.nl-nav a:not(.wp-element-button) { color: #DDE4F2; font-weight: 600; }
.nl-nav a:not(.wp-element-button):hover { color: #fff; }
.nl-header .wp-element-button { color: var(--wp--preset--color--ink); }
.wp-site-blocks > * + * { margin-block-start: 0; }
main > .wp-block-group.alignfull { margin-block-start: 0; }
@media (max-width: 781px) { .nl-nav .nl-hide-sm { display: none; } }

/* ---------- hero ---------- */
.nl-hero { position: relative; overflow: hidden; }
.nl-hero::after { content: ""; position: absolute; inset: auto -10% -45% auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(255, 200, 87, .16), transparent 62%); pointer-events: none; }
.nl-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.nl-hero .nl-lede { color: #C9D3E6; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.nl-clock { font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--wp--preset--color--amber); font-variant-numeric: tabular-nums; }

/* thread visual */
.nl-thread { position: relative; z-index: 1; background: #1D2C4F; border: 1px solid #2C3D66; border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); max-width: 440px; margin-left: auto; }
.nl-thread .nl-msg { border-radius: 16px; padding: 14px 16px; margin: 0 0 12px; font-size: 1rem; line-height: 1.45; max-width: 92%; }
.nl-thread .nl-in { background: #EEF2F8; color: var(--wp--preset--color--ink); border-bottom-left-radius: 4px; }
.nl-thread .nl-out { background: var(--wp--preset--color--lane); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.nl-thread .nl-meta { font-size: .82rem; color: #9FB0D3; margin: 0 0 6px; }
.nl-thread .nl-meta.nl-right { text-align: right; }
.nl-thread .nl-sys { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: #C9D3E6; border-top: 1px solid #2C3D66; padding-top: 14px; margin-top: 6px; }
.nl-thread .nl-sys::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 4px rgba(61, 214, 140, .18); flex: none; }
.nl-reveal { opacity: 0; transform: translateY(8px); animation: nlIn .5s ease forwards; }
.nl-reveal.d2 { animation-delay: .9s; } .nl-reveal.d3 { animation-delay: 1.7s; } .nl-reveal.d4 { animation-delay: 2.3s; }
@keyframes nlIn { to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.nl-section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.03em; line-height: 1.08; }
.nl-muted { color: var(--wp--preset--color--slate); }

/* services list: rows, not identical cards */
.nl-service { border-top: 1px solid var(--wp--preset--color--line); padding: 18px 0; margin: 0 !important; align-items: baseline; }
.nl-service p { margin: 4px 0 0; }
.nl-service .nl-price { text-align: right; }
@media (max-width: 781px) { .nl-service .nl-price { text-align: left; } }
.nl-service:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.nl-service h3 { font-size: 1.35rem; margin: 0; }
.nl-price { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.35rem; white-space: nowrap; color: var(--wp--preset--color--ink); }

/* steps: a real sequence */
.nl-steps { counter-reset: step; }
.nl-step { counter-increment: step; position: relative; padding-left: 64px; }
.nl-step::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--ink); color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 800; }
.nl-step h3 { margin: 0 0 6px; font-size: 1.2rem; }

/* work */
.nl-case { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--wp--preset--color--line); }
.nl-case img { display: block; width: 100%; height: auto; }

/* pricing table */
.nl-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.nl-table th, .nl-table td { text-align: left; padding: 16px 12px; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.nl-table th { font-weight: 600; color: var(--wp--preset--color--slate); font-size: .95rem; }
.nl-table td:last-child { font-family: var(--wp--preset--font-family--display); font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .nl-table td:nth-child(2), .nl-table th:nth-child(2) { display: none; } }

/* faq */
.nl-faq details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 18px 0; }
.nl-faq summary { cursor: pointer; font-weight: 600; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.nl-faq summary::-webkit-details-marker { display: none; }
.nl-faq summary::after { content: "+"; font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--wp--preset--color--lane); transition: transform .2s; }
.nl-faq details[open] summary::after { transform: rotate(45deg); }
.nl-faq details p { margin: 12px 0 0; color: var(--wp--preset--color--slate); }

/* quote form */
.nl-form { display: grid; gap: 16px; }
.nl-form .nl-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .nl-form .nl-row { grid-template-columns: 1fr; } }
.nl-form label { display: grid; gap: 6px; font-weight: 600; font-size: .98rem; color: #E6EBF5; }
.nl-form input, .nl-form select, .nl-form textarea { font: inherit; color: var(--wp--preset--color--ink); background: #fff; border: 2px solid transparent; border-radius: 12px; padding: 13px 14px; min-height: 48px; }
.nl-form textarea { min-height: 120px; resize: vertical; }
.nl-form input:focus, .nl-form select:focus, .nl-form textarea:focus { border-color: var(--wp--preset--color--amber); outline: none; }
.nl-form .nl-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: #C9D3E6; }
.nl-form .nl-check input { min-height: auto; width: 20px; height: 20px; margin-top: 2px; }
.nl-form .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-form button { font: inherit; font-weight: 700; font-size: 1.08rem; border: 0; border-radius: 999px; padding: 16px 28px; cursor: pointer; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--ink); justify-self: start; transition: transform .15s; }
.nl-form button:hover { transform: translateY(-1px); }
.nl-form button[disabled] { opacity: .6; cursor: progress; }
.nl-form .nl-status { min-height: 1.5em; margin: 0; font-weight: 600; }
.nl-form .nl-status.ok { color: #3DD68C; } .nl-form .nl-status.err { color: #FF9A8B; }

/* buttons */
.wp-block-button__link { transition: transform .15s, background-color .15s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.is-style-outline > .wp-block-button__link { border-width: 2px; }

/* footer */
.nl-footer a { color: #DDE4F2; }
.nl-footer a:hover { color: #fff; }