/*
Theme Name: RK web.dev
Theme URI: https://rkweb.dev
Author: Raunak Pandey
Author URI: https://rkweb.dev
Description: Dark, motion-led one-page theme for a white-label WordPress developer. Ships a full home page assembled from template parts, plus page templates for terms, privacy and refund policy. Motion is GSAP + ScrollTrigger with Lenis smooth scroll and honours prefers-reduced-motion.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rk-webdev
Tags: one-column, custom-colors, custom-menu, editor-style, full-width-template, translation-ready

Section markup carries inline styles on purpose: the design is a single bespoke
page, and keeping each section's rules on its own elements means a section can be
copied, reordered or deleted without hunting through a stylesheet for orphaned
rules. What lives here is what inline styles cannot express — resets, custom
properties, pseudo-states, keyframes, print and responsive rules.
*/

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
	--rk-bg: #05060a;
	--rk-surface: #080a11;
	--rk-surface-2: #0c1220;
	--rk-text: #eef1f6;
	--rk-text-dim: #a8b2c6;
	--rk-text-muted: #7d879e;
	--rk-text-faint: #4c5468;
	--rk-line: rgba(255, 255, 255, 0.1);
	--rk-blue: #1c4dff;
	--rk-blue-light: #7ea2ff;
	--rk-cyan: #00e5ff;
	--rk-pink: #ff2e88;
	--rk-shell: 1560px;
	--rk-gutter: 40px;
	--rk-font: "Satoshi", "PP Mori", system-ui, -apple-system, sans-serif;
	--rk-mono: "Azeret Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
* {
	box-sizing: border-box;
}

html {
	background: var(--rk-bg);
}

body {
	margin: 0;
	background: var(--rk-bg);
	color: var(--rk-text);
	font-family: var(--rk-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--rk-font);
	font-weight: 900;
	letter-spacing: -0.03em;
}

a {
	color: var(--rk-blue-light);
	text-decoration: none;
}

a:hover {
	color: var(--rk-text);
}

img {
	max-width: 100%;
}

::selection {
	background: var(--rk-blue);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--rk-blue);
	outline-offset: 4px;
}

/* Screen-reader text — WordPress accessibility requirement. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--rk-blue);
	color: #fff;
	font-family: var(--rk-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	clip: auto;
	width: auto;
	height: auto;
}

/* ---------------------------------------------------------------------------
   3. Lenis smooth scroll
   --------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   4. Motion helpers and interactive states
   --------------------------------------------------------------------------- */
@keyframes rkpulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.25;
		transform: scale(0.55);
	}
}

/* Split-text unit produced by site.js. */
.rk-w {
	display: inline-block;
}

.rk-row:hover .rk-fill {
	transform: scaleY(1);
}

.rk-row:hover .rk-flip {
	color: #fff;
}

.rk-row:hover .rk-num {
	color: rgba(255, 255, 255, 0.65);
}

.rk-cta:hover {
	background: #4d78ff;
	color: #fff;
}

.rk-out:hover {
	border-color: var(--rk-blue-light);
	background: rgba(28, 77, 255, 0.14);
}

.rk-faq-q:hover {
	color: var(--rk-blue-light);
}

.rk-panel:hover {
	border-color: rgba(0, 229, 255, 0.65) !important;
	background: var(--rk-surface-2) !important;
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------------------
   5. Legal documents (terms, privacy, refund)
   --------------------------------------------------------------------------- */
.rk-doc {
	position: relative;
	z-index: 1;
	max-width: 980px;
	margin: 0 auto;
	padding: 90px var(--rk-gutter) 120px;
}

.rk-doc__kicker {
	font-family: var(--rk-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--rk-blue-light);
}

.rk-doc__title {
	margin-top: 20px;
	font-size: clamp(38px, 5.4vw, 76px);
	line-height: 0.92;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.rk-doc__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--rk-line);
	font-family: var(--rk-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rk-text-faint);
}

.rk-doc__lede {
	margin: 34px 0 0;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.7;
	color: var(--rk-text-dim);
	max-width: 42em;
}

.rk-doc__toc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

.rk-doc__toc a {
	padding: 8px 14px;
	border: 1px solid var(--rk-line);
	border-radius: 999px;
	font-family: var(--rk-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rk-text-muted);
	transition: border-color 0.25s, color 0.25s;
}

.rk-doc__toc a:hover {
	border-color: rgba(0, 229, 255, 0.6);
	color: var(--rk-cyan);
}

.rk-doc__section {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--rk-line);
	scroll-margin-top: 120px;
}

.rk-doc__section-num {
	font-family: var(--rk-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--rk-cyan);
}

.rk-doc__section-title {
	margin-top: 12px;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.1;
	text-transform: uppercase;
}

.rk-doc__body {
	margin-top: 20px;
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--rk-text-dim);
	max-width: 46em;
}

.rk-doc__body p {
	margin: 0 0 16px;
}

.rk-doc__body p:last-child {
	margin-bottom: 0;
}

.rk-doc__body strong {
	color: var(--rk-text);
	font-weight: 700;
}

.rk-doc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 46em;
}

.rk-doc__list li {
	position: relative;
	padding-left: 26px;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--rk-text-dim);
}

.rk-doc__list li::before {
	content: "›";
	position: absolute;
	left: 4px;
	top: 0;
	color: var(--rk-blue-light);
}

/* Editor-authored content (page.php and any WYSIWYG body). */
.rk-entry-content h2,
.rk-entry-content h3 {
	margin: 44px 0 14px;
	text-transform: uppercase;
}

.rk-entry-content p,
.rk-entry-content li {
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--rk-text-dim);
}

.rk-entry-content a {
	border-bottom: 1px solid rgba(126, 162, 255, 0.4);
}

/* ---------------------------------------------------------------------------
   6. Responsive
   Section markup is inline-styled, so overrides live here and must be
   !important. Everything is matched structurally or by inline-style substring,
   so a section can still be reordered or copied without breaking these rules.
   --------------------------------------------------------------------------- */

/* --- Tablet: 1100px and below ------------------------------------------- */
@media (max-width: 1100px) {

  /* Tool panels: four across is too tight below this width. */
  #rk3 [data-rk="tileboard"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Rate cards: price column and detail column stack. */
  #rk3 [data-rk="stack-item"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    padding: 40px 34px !important;
  }

  /* Sticky heading columns have nothing left to sit beside. */
  #rk3 [style*="position: sticky"]:not([data-rk="nav"]) {
    position: static !important;
  }

  #rk3 [data-rk="stack-item"] {
    margin-bottom: 22px !important;
  }

  #rk3 [data-rk="nav-inner"] {
    gap: 22px !important;
  }
}

/* --- Mobile: 900px and below -------------------------------------------- */
@media (max-width: 900px) {

  /* Every two-column section collapses to one. */
  #rk3 > section[style*="grid-template-columns"],
  #rk3 > section > div[style*="grid-template-columns: 1.06fr"],
  #rk3 > header > div[style*="grid-template-columns: 300px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }

  /* Gutters: 40px is a quarter of a phone screen. */
  #rk3 > header,
  #rk3 > section,
  #rk3 > footer > div,
  #rk3 > section > div[style*="40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Vertical rhythm, compressed. */
  #rk3 > section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  #rk3 > header {
    padding-top: 34px !important;
  }

  /* Hero type sizes off available width on desktop; that maths goes tiny on a
     phone, so hand it a viewport-relative clamp instead. */
  #rk3 > header > h1[data-rk="chars"] {
    font-size: clamp(38px, 12.4vw, 92px) !important;
    line-height: 0.9 !important;
  }

  /* Section headings authored in vw. */
  #rk3 h2[data-rk="chars"] {
    font-size: clamp(28px, 8.4vw, 52px) !important;
    line-height: 0.98 !important;
  }

  #rk3 h2[data-rk="wordfill"],
  #rk3 h3[data-rk="wordfill"] {
    font-size: clamp(18px, 4.6vw, 26px) !important;
    line-height: 1.5 !important;
  }

  /* Portrait: cap it so the bio is not pushed off the fold. */
  #rk3 [data-rk="portrait-mask"] {
    width: 100% !important;
    max-width: 300px !important;
  }

  /* Experience rows: three columns become a stack. */
  #rk3 .rk-row[style*="grid-template-columns: 1fr 1fr auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 24px 16px !important;
  }

  #rk3 .rk-row .rk-flip[style*="justify-self: end"] {
    justify-self: start !important;
  }

  #rk3 .rk-row h3.rk-flip {
    font-size: clamp(22px, 6.6vw, 32px) !important;
  }

  /* Capability rows: the row's own 26px inset stacks on the section gutter. */
  #rk3 .rk-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #rk3 .rk-row > div[style*="gap: 26px"] {
    gap: 12px !important;
  }

  #rk3 .rk-row h3[class="rk-flip"],
  #rk3 #services .rk-row h3 {
    font-size: clamp(21px, 6vw, 30px) !important;
  }

  /* Four-up summary strips. */
  #rk3 [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Masthead: logo and CTA on one line, links on a scrollable second line. */
  /* Row one: logo and CTA together. Row two: the menu, scrollable. */
  #rk3 [data-rk="nav-inner"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 20px !important;
  }

  /* Logo takes the slack, CTA keeps its size — neither may wrap. */
  #rk3 [data-rk="nav-inner"] > a:first-child {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0 !important;
  }

  #rk3 [data-rk="nav-inner"] > a:first-child svg {
    width: 62px !important;
    height: 40px !important;
    flex: none;
  }

  #rk3 [data-rk="nav-inner"] > a:first-child span:last-child {
    font-size: 19px !important;
  }

  #rk3 [data-rk="nav-inner"] > a:last-child {
    flex: none;
    margin-left: 0;
    padding: 10px 15px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  /* Menu below, one scrollable line. */
  #rk3 [data-rk="nav-inner"] > div {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 16px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    padding-bottom: 2px;
  }

  #rk3 [data-rk="nav-inner"] > div::-webkit-scrollbar {
    display: none;
  }

  /* Pointer-only ornaments. */
  #rk3 [data-rk="cursor"],
  #rk3 [data-rk="glow"] {
    display: none !important;
  }

  /* The rotating badge hangs off its frame on desktop; bring it inside. */
  #rk3 [data-rk="badge"] {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: 92px !important;
    height: 92px !important;
  }

  #rk3 [data-rk="badge"] svg {
    width: 92px !important;
    height: 92px !important;
  }

  /* Contact block: the email is authored in vw and would shrink to nothing. */
  #rk3 #contact a[href^="mailto"] {
    font-size: clamp(21px, 6.4vw, 40px) !important;
    overflow-wrap: anywhere;
  }

  #rk3 #contact > div {
    padding: 64px 20px !important;
  }

  /* Footer wordmark. */
  #rk3 [data-rk="footword"] {
    font-size: 22vw !important;
    padding-left: 20px !important;
  }

  /* Legal documents. */
  .rk-doc {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* --- Small phones: 620px and below -------------------------------------- */
@media (max-width: 620px) {

  #rk3 [data-rk="tileboard"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Rate card padding and the oversized price. */
  #rk3 [data-rk="stack-item"] > div {
    padding: 30px 22px !important;
    border-radius: 18px !important;
  }

  #rk3 [data-rk="stack-item"] span[style*="font-size: 96px"] {
    font-size: 62px !important;
  }

  #rk3 [data-rk="stack-item"] h3 {
    font-size: 32px !important;
  }

  /* Marquee weight. */
  #rk3 [data-rk="marquee"] {
    font-size: 20px !important;
    gap: 26px !important;
  }

  /* Hero clock row. */
  #rk3 > header [style*="letter-spacing: 0.12em"] {
    gap: 16px !important;
  }

  /* Buttons and pills go full width so they are thumb-sized. */
  #rk3 a[class*="rk-cta"],
  #rk3 a[class*="rk-out"] {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Four-up strips: one per row rather than a cramped pair. */
  #rk3 [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Legal table of contents. */
  .rk-doc__title {
    font-size: clamp(30px, 10vw, 48px) !important;
  }
}

/* --- Touch devices: no hover choreography ------------------------------- */
@media (hover: none) {

  #rk3 [data-rk="cursor"],
  #rk3 [data-rk="glow"] {
    display: none !important;
  }

  /* Hover-only reveals must not be the sole way to read a row. */
  #rk3 .rk-row .rk-fill {
    display: none !important;
  }
}


/* ---------------------------------------------------------------------------
   7. Reduced motion — hand the finished state to anyone who asks for less
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	[data-rk="curtain"] {
		display: none !important;
	}

	[data-rk="portrait-mask"] {
		clip-path: none !important;
	}
}

/* ---------------------------------------------------------------------------
   8. Print — legal pages need to be printable
   --------------------------------------------------------------------------- */
@media print {
	body {
		background: #fff;
		color: #000;
	}

	[data-rk="curtain"],
	[data-rk="overlay"],
	[data-rk="progress"],
	[data-rk="cursor"],
	[data-rk="glow"],
	nav,
	footer {
		display: none !important;
	}

	.rk-doc__body,
	.rk-doc__list li {
		color: #222;
	}
}