/* ============================================================
   Rentomatic — main.css  (shared base styles)
   Pulled verbatim from the prototype HTMLs:
   variables, type, container, eyebrow, btn, ticker, nav,
   mobile menu, footer, and shared responsive rules.
   Per-page rules live in their own page-{slug}.css files.
   ============================================================ */

:root {
	--accent: #084EFE;
	--accent-dark: #0640CC;
	--accent-tint: #EEF3FF;
	--accent-deep: #0A2A7A;
	--ink: #0B0D14;
	--paper: #F4F1EA;       /* warm off-white */
	--paper-2: #EAE5D9;
	--muted: #6B7280;
	--rule: #1A1D26;
	--red: #B0303C;
	--card: #FFFFFF;
	--ok: #1F9D55;
	--shadow: 0 2px 16px rgba(0, 0, 0, .07);
	--shadow-lg: 0 20px 60px rgba(10, 42, 122, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.mono  { font-family: 'JetBrains Mono', monospace; letter-spacing: -.01em; }
.serif { font-family: 'Fraunces', serif; font-optical-sizing: auto; }

h1, h2, h3 { margin: 0; letter-spacing: -.02em; }

.eyebrow {
	font-family: 'JetBrains Mono', monospace; font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
	display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
	content: ''; display: inline-block; width: 18px; height: 1px; background: var(--accent);
}

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 24px; border-radius: 100px;
	font-weight: 600; font-size: 14px;
	transition: all .2s ease; white-space: nowrap;
	font-family: inherit; cursor: pointer; border: none;
}
.btn svg { transition: transform .2s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--ink);   color: var(--paper); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-accent  { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-ghost   { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-full    { width: 100%; }

/* Ticker — shared across every page */
.ticker {
	background: var(--ink); color: var(--paper);
	overflow: hidden; border-bottom: 1px solid #000;
}
.ticker-track {
	display: flex; gap: 40px; padding: 10px 0;
	animation: scroll 40s linear infinite;
	white-space: nowrap;
	font-family: 'JetBrains Mono', monospace; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 40px; }
.ticker-track em   { color: var(--accent); font-style: normal; font-weight: 600; }
@keyframes scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ====================================================
   Preloader — full-screen overlay, fades out on window.load
   ==================================================== */
.rm-preloader {
	position: fixed; inset: 0;
	background: var(--ink); color: var(--paper);
	z-index: 99999;
	display: grid; place-items: center;
	opacity: 1;
	transition: opacity .45s ease, visibility 0s linear .45s;
}
.rm-preloader.is-loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.rm-preloader-inner    { display: grid; place-items: center; gap: 18px; }
.rm-preloader-arc      { animation: rm-preloader-spin 1.1s linear infinite; transform-origin: 40px 40px; }
.rm-preloader-label    {
	font-family: 'JetBrains Mono', monospace; font-size: 11px;
	letter-spacing: .24em; text-transform: uppercase; color: #9CA2B3;
	animation: rm-preloader-pulse 1.4s ease-in-out infinite;
}
@keyframes rm-preloader-spin  { to { transform: rotate(360deg); } }
@keyframes rm-preloader-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Hide preloader entirely if JS is disabled (no fade dance, just skip). */
.no-js .rm-preloader { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rm-preloader-arc, .rm-preloader-label { animation: none; }
}

/* ====================================================
   Scroll-reveal animations — opt-in via .reveal class.
   main.js toggles .is-visible via IntersectionObserver.
   ==================================================== */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
	will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-fade { transform: none; }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX( 32px); }
.reveal-left.is-visible, .reveal-right.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Auto-reveal hero headlines + section titles + cards on scroll
   (no markup change — main.js attaches the .reveal class then unobserves) */

/* Skip-to-content link — visible on keyboard focus only */
.skip-link {
	position: absolute; top: -100px; left: 0; z-index: 10000;
	background: var(--ink); color: var(--paper);
	padding: 14px 22px;
	font-family: 'JetBrains Mono', monospace; font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
	border-bottom-right-radius: 8px;
	text-decoration: none;
	transition: top .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Screen-reader-only utility (WP-standard sr-only pattern) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Nav (shared, sticky) */
.nav {
	position: sticky; top: 0; z-index: 1000;
	background: var(--paper);
	border-bottom: 1px solid transparent;
	transition: border-color .2s, background .2s;
}

/* Push the sticky nav (and any other sticky element) below the WP admin bar
   when an admin is logged in. Without this, the nav slides UNDER the admin
   bar on scroll, which is what showed up as a "weird gap" earlier. */
body.admin-bar .nav { top: 32px; }
body.admin-bar .jump { top: 128px; } /* FAQ page jump-nav (96 nav + 32 admin) */
@media screen and (max-width: 782px) {
	body.admin-bar .nav  { top: 46px; }
	body.admin-bar .jump { top: 126px; } /* 80 nav + 46 admin */
}
.nav.scrolled {
	border-color: rgba(11,13,20,.08);
	background: rgba(244,241,234,.92);
	backdrop-filter: blur(12px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 96px; gap: 24px; }
.logo { display: flex; align-items: center; }
.logo img,
.logo .custom-logo { height: 64px; width: auto; display: block; max-width: none; }

/* ====================================================
   Typographic logo (Logo-03-Italic direction).
   "rento" upright + "matic" italic with accent underline.
   Used by rentomatic_logo() in functions.php whenever no
   Customizer logo is uploaded.
   ==================================================== */
.rm-logo {
	display: inline-flex; flex-direction: column; align-items: flex-start;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
}
.rm-logo-word {
	font-family: 'Fraunces', serif; font-weight: 700;
	font-size: 32px; line-height: .85; letter-spacing: -.045em;
	display: inline-flex; align-items: baseline;
}
.rm-logo-up { font-style: normal; }
.rm-logo-it {
	font-style: italic; font-weight: 600;
	color: var(--accent);
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% .08em;
	padding-bottom: .02em;
	margin-left: .01em;
}
.rm-logo-sub {
	margin-top: 8px; padding-top: 6px;
	border-top: 1.5px solid currentColor;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase;
	opacity: .7;
	display: inline-flex; align-items: center; gap: 8px;
	width: 100%;
}
.rm-logo-dia {
	width: 6px; height: 6px;
	background: var(--accent);
	transform: rotate(45deg);
	display: inline-block;
}
/* Footer variant — paper text on dark footer, larger sub-label visible */
.rm-logo--footer { color: var(--paper); }
.rm-logo--footer .rm-logo-word { font-size: 36px; }
.rm-logo--footer .rm-logo-it   { color: var(--accent); }
/* Hover lift on the linked logo in nav */
.logo:hover .rm-logo { opacity: .92; }
@media (max-width: 900px) {
	.rm-logo-word { font-size: 26px; }
	.rm-logo--footer .rm-logo-word { font-size: 32px; }
}
@media (max-width: 600px) {
	.rm-logo-word { font-size: 22px; }
	.rm-logo--footer .rm-logo-word { font-size: 28px; }
}

/* Strip default list-bullets from menu items rendered by wp_nav_menu().
   The menu uses items_wrap=%3$s (no <ul> wrapper) so each <li> is a direct
   child of .nav-links / .mobile-menu — browsers default to display:list-item
   which shows the bullet. */
.nav-links li,
.mobile-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
.nav-links { display: flex; gap: 28px; align-items: center; padding: 0; margin: 0; list-style: none; }
.nav-links li { display: flex; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a { color: var(--accent); }
.nav-links a.active::after,
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after {
	content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
	width: 5px; height: 5px; background: var(--accent); border-radius: 50%;
}

.nav-cta { display: flex; gap: 10px; align-items: center; }
.icon-btn {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--ink); display: grid; place-items: center;
	transition: all .2s; background: transparent;
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }

.hamburger { display: none; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }

.mobile-menu {
	display: none; position: absolute; top: 96px; left: 0; right: 0;
	background: var(--paper); border-bottom: 1px solid var(--ink); padding: 20px 32px;
	z-index: 999;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
	display: block; padding: 12px 0; font-weight: 500;
	border-bottom: 1px solid rgba(11,13,20,.08);
}
/* The CTA at the bottom of the mobile menu must NOT pick up the generic
   .mobile-menu a styles above (which strip its padding, full-width it, and
   add a divider line). Force the standard button look back on. */
.mobile-menu a.btn,
.mobile-menu .btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	width: auto;
	margin-top: 20px;
	border-bottom: none;
	border-radius: 100px;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}
.mobile-menu a.btn-primary,
.mobile-menu .btn-primary { background: var(--ink); color: var(--paper); }
.mobile-menu a.btn-accent,
.mobile-menu .btn-accent  { background: var(--accent); color: #fff; }

/* ====================================================
   Live Savings Calculator — used on Home, City pages, Home V3 hero.
   Single shared definition (was duplicated across page-city.css + V3 inline).
   ==================================================== */
.calc-sec        { padding: 120px 0; }
.calc-sec-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.calc-sec h2     { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.03em; margin: 16px 0 20px; }
.calc-sec h2 em  { font-style: italic; color: var(--accent); }
.calc-sec p      { font-size: 17px; color: #40444F; margin: 0 0 20px; }
.calc-card       { background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: 32px 30px; box-shadow: 10px 10px 0 var(--accent); }
.calc-head       { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1.5px dashed var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #40444F; }
.calc-head .pill { background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 100px; font-size: 10px; }
.calc-label      { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.calc-input-wrap { position: relative; display: flex; align-items: center; border-bottom: 2px solid var(--ink); padding: 6px 0 10px; }
.calc-input-wrap .dollar { font-family: 'Fraunces', serif; font-weight: 700; font-size: 40px; color: var(--accent); margin-right: 4px; }
#calcRent        { font-family: 'Fraunces', serif; font-weight: 700; font-size: 48px; border: none; outline: none; background: transparent; width: 100%; letter-spacing: -.02em; color: var(--ink); padding: 0; }
.calc-slider     { width: 100%; margin: 16px 0 4px; accent-color: var(--accent); height: 4px; }
.calc-slider-track { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.calc-results    { margin-top: 24px; padding-top: 20px; border-top: 1.5px dashed var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-res-cell   { padding: 14px 16px; border-radius: 12px; background: var(--paper-2); }
.calc-res-cell.win { background: var(--ink); color: var(--paper); }
.calc-res-cell .kl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.calc-res-cell .kv { font-family: 'Fraunces', serif; font-weight: 700; font-size: 28px; letter-spacing: -.02em; line-height: 1; }
.calc-res-cell.win .kv { color: var(--accent); }
.calc-big-save   { margin-top: 18px; padding: 16px 18px; background: var(--accent); color: #fff; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc-big-save .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.calc-big-save .num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 36px; letter-spacing: -.02em; line-height: 1; }
.calc-big-save .num small { font-size: 13px; font-weight: 400; opacity: .8; display: block; margin-top: 4px; font-family: 'DM Sans', sans-serif; letter-spacing: 0; }
@media (max-width: 900px) {
	.calc-sec       { padding: 72px 0; }
	.calc-sec-grid  { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.calc-card      { padding: 22px 20px; box-shadow: 6px 6px 0 var(--accent); }
	#calcRent       { font-size: 36px; }
	.calc-input-wrap .dollar { font-size: 30px; }
	.calc-results   { grid-template-columns: 1fr; }
	.calc-big-save .num { font-size: 28px; }
}

/* Footer (shared) */
footer {
	background: var(--ink); color: #C9CEDB;
	padding: 64px 0 28px; border-top: 1px solid rgba(255,255,255,.08);
	position: relative; overflow: hidden;
}
.footer-top {
	display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px;
	padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img,
.footer-brand .custom-logo {
	height: 72px; filter: brightness(0) invert(1);
	margin-bottom: 20px; max-width: 100%;
}
.footer-brand p { max-width: 360px; font-size: 14px; margin: 0; color: #C9CEDB; }
.footer-col h4 {
	font-family: 'JetBrains Mono', monospace; font-size: 11px;
	letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a  { color: #C9CEDB; font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-col p  { font-size: 14px; margin: 0 0 6px; color: #C9CEDB; }
.footer-bottom {
	padding-top: 20px;
	font-family: 'JetBrains Mono', monospace; font-size: 11px;
	letter-spacing: .08em; text-transform: uppercase; color: #6B6F7A;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-bottom em { color: var(--accent); font-style: normal; }

/* Footer social icons */
.footer-social {
	display: flex; gap: 10px; padding: 24px 0 16px;
	border-top: 1px dashed rgba(255,255,255,.1);
	margin-top: 24px;
}
.footer-social a {
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	display: grid; place-items: center;
	color: #C9CEDB;
	transition: all .2s ease;
}
.footer-social a:hover {
	background: var(--accent); border-color: var(--accent); color: #fff;
	transform: translateY(-2px);
}

/* Footer credit (Designed by Lise Infotech) */
.footer-credit {
	margin-top: 18px; padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,.06);
	font-family: 'JetBrains Mono', monospace; font-size: 11px;
	letter-spacing: .08em; color: #6B6F7A; text-align: center;
}
.footer-credit a {
	color: #C9CEDB; font-weight: 600;
	border-bottom: 1px dashed rgba(201,206,219,.3);
	margin-left: 6px;
}
.footer-credit a:hover { color: var(--accent); border-color: var(--accent); }

/* Shared responsive rules for nav/footer/ticker.
   Page-specific overrides live in each page's own CSS file. */
@media (max-width: 900px) {
	.container { padding: 0 20px; }
	.nav-links { display: none; }
	.hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; }
	.nav-cta .btn { display: none; }
	.logo img, .logo .custom-logo { height: 48px; }
	.nav-inner { height: 80px; }
	.mobile-menu { top: 80px; }
	.ticker-track { animation-duration: 28s; font-size: 11px; }
	.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
	.footer-brand { grid-column: 1 / -1; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
	.container { padding: 0 16px; }
	.logo img, .logo .custom-logo { height: 40px; }
	.nav-inner { height: 64px; gap: 12px; }
	.mobile-menu { top: 64px; padding: 16px 20px; }
	.icon-btn { width: 40px; height: 40px; }
	.nav-cta { gap: 6px; }
	.ticker-track { font-size: 10px; gap: 24px; animation-duration: 24s; }
	.ticker-track span { gap: 24px; }
	.footer-top { grid-template-columns: 1fr; }
	.btn { padding: 13px 20px; font-size: 14px; }
	footer { padding: 56px 0 24px; }
}