/*
Theme Name: Dank You — Revenue Calculator
Theme URI: https://dankyou.com
Author: Dank You
Description: WordPress theme for Dank You. Ships a dedicated "Revenue Calculator" page template (the black hero, money-green combined-estimate band, and bordered two-panel calculator) plus a standard page template so the rest of the site can be built with Elementor or any other page builder.
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dankyou-calculator
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500&display=swap');

:root {
  --black: #1c1c1c;
  --white: #ffffff;
  --off-white: #f9f9f7;
  --gray-100: #f0efec;
  --gray-200: #dddbd6;
  --gray-400: #9e9b94;
  --gray-600: #5c5a54;
  --gray-900: #141412;
  --money-green: #1f4d38;
  --email-blue: #2c4f8a;
  --head: "Plus Jakarta Sans", sans-serif;
  --body: "Inter", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); background: var(--off-white); color: var(--black); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
input::placeholder { color: var(--gray-200); font-family: var(--body); font-weight: 300; font-size: 14px; }
input:focus { outline: none; border-color: var(--black) !important; }

/* Site chrome (shared by every page — including Elementor-built ones) */
.dy-site-nav { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 0 clamp(20px,5vw,48px); height: 60px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; }
.dy-site-nav img { height: 34px; width: auto; }
.dy-site-footer { background: var(--gray-900); padding: 36px clamp(20px,5vw,48px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dy-site-footer img { height: 26px; width: auto; filter: invert(1) brightness(1.7); }
.dy-footer-copy { font-family: var(--body); font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.25); letter-spacing: 0.03em; }

/* Calculator page template */
.dy-hero { position: relative; background: var(--black); padding: 76px clamp(20px,5vw,48px) 56px; text-align: center; overflow: hidden; }

.dy-hero-glow { position: absolute; inset: 0; background: radial-gradient(560px 300px at 50% -60px, rgba(31,77,56,0.35), transparent 70%); pointer-events: none; }
.dy-corner { position: absolute; width: 20px; height: 20px; pointer-events: none; }
.dy-corner-tl { top: 18px; left: 18px; border-top: 2px solid rgba(255,255,255,0.9); border-left: 2px solid rgba(255,255,255,0.9); }
.dy-corner-br { bottom: 18px; right: 18px; border-bottom: 2px solid rgba(255,255,255,0.9); border-right: 2px solid rgba(255,255,255,0.9); }
.dy-hero-inner { position: relative; }
.dy-hero h1 { font-family: var(--head); font-weight: 800; font-size: clamp(30px,4.5vw,48px); color: var(--white); line-height: 1.08; letter-spacing: -0.03em; margin: 0 auto 18px; max-width: 640px; }
.dy-hero p { font-family: var(--body); font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.42); line-height: 1.75; max-width: 420px; margin: 0 auto; }

.dy-frame-pad { max-width: 840px; margin: 0 auto; padding: 48px clamp(20px,5vw,24px) 88px; }
.dy-frame { border: 3px solid var(--black); }

.dy-total { background: var(--money-green); position: relative; padding: 34px clamp(24px,4vw,40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dy-total-corner-tl { position: absolute; top: 10px; left: 10px; width: 12px; height: 12px; border-top: 2px solid rgba(255,255,255,0.4); border-left: 2px solid rgba(255,255,255,0.4); }
.dy-total-corner-br { position: absolute; bottom: 10px; right: 10px; width: 12px; height: 12px; border-bottom: 2px solid rgba(255,255,255,0.4); border-right: 2px solid rgba(255,255,255,0.4); }
.dy-total-eyebrow { font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.dy-total-title { font-family: var(--head); font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 5px; letter-spacing: -0.01em; }
.dy-total-sub { font-family: var(--body); font-size: 12px; font-weight: 300; color: #fff; }
.dy-total-num { font-family: var(--head); font-size: clamp(38px,6vw,56px); font-weight: 800; color: var(--white); letter-spacing: -0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1; }

.dy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--black); }
.dy-card { background: var(--white); padding: 30px clamp(20px,3vw,32px); display: flex; flex-direction: column; }
.dy-tag { display: inline-flex; align-self: flex-start; font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; margin-bottom: 14px; }
.dy-tag-m { background: color-mix(in srgb, var(--money-green) 12%, transparent); color: var(--money-green); }
.dy-tag-e { background: color-mix(in srgb, var(--email-blue) 12%, transparent); color: var(--email-blue); }
.dy-card h3 { font-family: var(--head); font-size: 20px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.dy-card p { font-family: var(--body); font-size: 13px; font-weight: 300; color: var(--gray-600); line-height: 1.55; margin: 0 0 14px; max-width: 34ch; }
.dy-formula { font-family: monospace; font-size: 11px; color: var(--gray-400); margin-bottom: 24px; }
.dy-field-label { display: block; font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--gray-600); margin-bottom: 5px; }
.dy-field-hint { font-family: var(--body); font-size: 11px; font-weight: 300; color: var(--gray-400); margin-bottom: 9px; display: block; line-height: 1.5; }
.dy-input-wrap { position: relative; margin-bottom: 20px; }
.dy-input-wrap.tight { margin-bottom: 16px; }
.dy-input { width: 100%; height: 48px; border: 1px solid var(--gray-200); font-family: var(--head); font-size: 16px; font-weight: 600; color: var(--black); padding: 0 48px 0 14px; background: var(--off-white); }
.dy-input-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--body); font-size: 12px; color: var(--gray-400); pointer-events: none; }
.dy-result { border-top: 1px solid var(--gray-200); padding-top: 18px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dy-result-label { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--gray-600); margin-bottom: 2px; }
.dy-result-sub { font-family: var(--body); font-size: 11px; font-weight: 300; color: var(--gray-400); }
.dy-result-num { font-family: var(--head); font-size: 30px; font-weight: 800; color: var(--black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dy-reset { font-family: var(--body); font-size: 12px; color: var(--gray-400); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: 12px; padding: 0; align-self: flex-start; }
.dy-reset:hover { color: var(--gray-600); }
.dy-disclaimer { font-family: var(--body); font-size: 11px; font-weight: 300; color: var(--gray-400); line-height: 1.75; text-align: center; margin-top: 28px; padding: 0 20px; }

@media (max-width: 640px) {
  .dy-grid { grid-template-columns: 1fr !important; }
  .dy-hero { padding: 48px 20px 36px !important; }
  .dy-total { flex-direction: column; align-items: flex-start !important; text-align: left; }
  .dy-total-num { font-size: 36px !important; }
  .dy-frame-pad { padding-top: 32px !important; padding-bottom: 64px !important; }
}