/*
Theme Name: DriveNova
Theme URI: https://drivenova.lk
Author: DriveNova
Author URI: https://drivenova.lk
Description: The DriveNova website theme: dark smoked-glass cards, Nova cyan accents, Sora and Manrope type. A block theme, so every page is edited in the WordPress editor.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drivenova
*/

/* ---------- page background: the night sky of the app ---------- */
body {
	background:
		radial-gradient(1100px 620px at 12% -12%, rgba(34, 211, 238, 0.12), transparent 60%),
		radial-gradient(900px 520px at 100% -5%, rgba(59, 130, 246, 0.10), transparent 60%),
		var(--wp--preset--color--base);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection { background: rgba(34, 211, 238, 0.35); color: #fff; }
img { height: auto; }

/* ---------- smoked glass (block style "Glass" on Group / Columns / Cover) ---------- */
.is-style-glass,
.is-style-glass-strong {
	position: relative;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)) !important;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 22px;
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.is-style-glass-strong {
	background: linear-gradient(160deg, rgba(18, 23, 34, 0.86), rgba(10, 13, 21, 0.92)) !important;
	border-color: rgba(255, 255, 255, 0.12);
}
/* the lit lip along the top edge */
.is-style-glass::before,
.is-style-glass-strong::before {
	content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	pointer-events: none;
}
.is-style-glass.has-hover, .is-style-glass-strong.has-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.is-style-glass.has-hover:hover, .is-style-glass-strong.has-hover:hover { transform: translateY(-4px); border-color: rgba(103, 232, 249, 0.35); }

/* ---------- buttons ---------- */
.wp-element-button, .wp-block-button__link { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.06); }
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { border-color: rgba(103, 232, 249, 0.5); }

/* ---------- small labels (eyebrow text) ---------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-light);
}
.dn-gradient-text {
	background: linear-gradient(120deg, #F8FAFC 10%, #67E8F9 55%, #3B82F6 95%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- header ---------- */
.dn-header {
	position: sticky; top: 0; z-index: 50;
	transition: background .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s, backdrop-filter .3s;
	border-bottom: 1px solid transparent;
}
.dn-header.is-scrolled {
	background: rgba(5, 7, 12, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
.admin-bar .dn-header { top: var(--wp-admin--admin-bar--height, 32px); }
.dn-header .wp-block-site-logo img, .dn-header .dn-logo img { max-height: 34px; width: auto; }
.dn-header .wp-block-navigation a { padding: 0.4rem 0.2rem; position: relative; }
.dn-header .wp-block-navigation a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, #67E8F9, #3B82F6); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.dn-header .wp-block-navigation a:hover, .dn-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--contrast); }
.dn-header .wp-block-navigation a:hover::after, .dn-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* mobile menu: a full-screen smoked-glass overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(5, 7, 12, 0.94) !important;
	color: var(--wp--preset--color--contrast) !important;
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--contrast) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--wp--preset--font-family--sora); font-size: 1.6rem; font-weight: 500; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); }
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
@media (max-width: 781px) { .dn-header .dn-hide-mobile { display: none !important; } }
@media (min-width: 782px) { .dn-show-mobile { display: none !important; } }

/* ---------- footer ---------- */
.dn-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(11, 15, 23, 0.4), rgba(5, 7, 12, 1)); }
.dn-footer h3 { font-family: var(--wp--preset--font-family--manrope); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 800; }
.dn-footer ul { list-style: none; padding: 0; margin: 0; }
.dn-footer li { margin: 0.45rem 0; font-size: 0.95rem; }
.dn-footer a { color: var(--wp--preset--color--soft); }
.dn-footer a:hover { color: var(--wp--preset--color--accent-light); }

/* ---------- hero (Phase 1 picture; Phase 2 swaps in the 3D screen) ---------- */
.dn-hero { position: relative; overflow-x: clip; }
.dn-hero::before {
	content: ""; position: absolute; left: -10%; right: -10%; bottom: -25%; height: 75%; z-index: -1;
	background: radial-gradient(closest-side, rgba(34, 211, 238, 0.22), transparent 70%);
	filter: blur(10px); pointer-events: none;
}
.dn-device {
	position: relative; border-radius: 26px; padding: 10px;
	background: linear-gradient(160deg, #1c2230, #0a0d14);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: perspective(1400px) rotateX(8deg) rotateY(-10deg);
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.dn-device:hover { transform: perspective(1400px) rotateX(2deg) rotateY(-3deg); }
.dn-device img { display: block; border-radius: 18px; width: 100%; }
@media (max-width: 781px) { .dn-device { transform: none; } }

/* ---------- reveal on scroll (site.js adds .is-in; only when JavaScript runs, so the editor and no-JS visitors always see everything) ---------- */
.dn-js .dn-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.dn-js .dn-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.dn-js .dn-reveal { opacity: 1; transform: none; transition: none; }
	.dn-device, .dn-device:hover { transform: none; }
	* { scroll-behavior: auto !important; }
}

/* ---------- floating WhatsApp button ---------- */
.dn-wa {
	position: fixed; right: 18px; bottom: 18px; z-index: 60;
	width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center;
	background: #25D366; color: #fff;
	box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6);
	transition: transform .2s ease;
}
.dn-wa:hover { transform: scale(1.06); color: #fff; }
.dn-wa svg { width: 30px; height: 30px; }

/* ---------- content pages ---------- */
.wp-block-post-content p, .wp-block-post-content li { color: var(--wp--preset--color--soft); }
.wp-block-post-content strong { color: var(--wp--preset--color--contrast); }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--wp--preset--color--line); padding: 0.7rem 0.9rem; }
.wp-block-table th { color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); }
.wp-block-details { border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1rem 1.25rem; background: rgba(255,255,255,0.03); }
.wp-block-details summary { cursor: pointer; font-weight: 700; color: var(--wp--preset--color--contrast); }
.wp-block-details[open] summary { margin-bottom: 0.6rem; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* feature card icon */
.dn-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--wp--preset--color--accent-light); background: linear-gradient(160deg, rgba(34,211,238,0.18), rgba(59,130,246,0.10)); border: 1px solid rgba(103,232,249,0.25); }
.dn-icon svg { width: 22px; height: 22px; }
.is-style-glass h3, .is-style-glass-strong h3 { margin-top: 0.6rem; }