/* ========== THEME TOKENS ========== */
/* Light theme (default) */
/* Default = dark mode */
:root,
[data-theme="dark"] {
  --bg:#0b0f14;
  --surface:#0f1821;
  --card:#101a24;
  --text:#eef3f7;
  --muted:#a9b4c2;
  --border:rgba(255,255,255,.08);
  --primary:#0072c6;
  --primary-contrast:#ffffff;
  --accent:#e0262d;
  --primary-strong:#0a74c9;
  --input-bg:#0d1620;
  --input-text:#eef3f7;
}

/* Light mode overrides */
[data-theme="light"] {
  --bg:#f6f8fa;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#1b1f23;
  --muted:#5c6773;
  --border:rgba(0,0,0,.12);
  --primary:#00538e;
  --primary-contrast:#ffffff;
  --accent:#ad1f25;
  --primary-strong:#0072c6;
  --input-bg:#ffffff;
  --input-text:#1b1f23;
}

/* Dark theme */
html[data-theme="dark"]{
  --bg:#0b0f14;
  --surface:#0f1821;
  --card:#101a24;
  --text:#eef3f7;
  --muted:#a9b4c2;
  --border:rgba(255,255,255,.08);
  --primary:#0072c6;
  --primary-strong:#0a74c9;
  --primary-contrast:#ffffff;
  --accent:#e0262d;
}

/* Full-viewport decorative background; vary by theme */
html{
  background:
    radial-gradient(150vw 60vh at 10% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(150vw 60vh at 90% -10%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 70%, var(--surface)) 40%, var(--surface));
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 150vw 60vh, 150vw 60vh, cover;
}

body{
  height:100%;
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: none;
  color: var(--text);
}

/* header + nav keep working for both themes */
.header{
  background:
    radial-gradient(1200px 500px at 10% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(1200px 500px at 90% -10%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 60%),
    var(--surface);
  border-bottom:1px solid var(--border);
}
.nav{max-width:980px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:14px}
.logo-wrap{
  display:flex;
  align-items:center;   /* vertically center logo + text */
  gap:12px;
  text-decoration:none;
  color:var(--text);
}
.logo-wrap img{
  height: 64px;
  width: auto;
}

@media (min-width: 900px){
  .logo-wrap img{
    height: 92px;   /* or 96px if you want it even bolder */
    width: auto;
  }
}

.brand{
  font-weight:800;
  letter-spacing:.3px;
  font-size:1.25rem;
  line-height:1.2;  /* tighter, so it centers visually */
}

.brand .kjt{
  color:var(--text);
}

.brand .hvac{
  color:var(--muted);
  font-weight:600;
  font-size: 1rem;      /* optional: slightly smaller than “KJT Mechanical” */
}

@media (min-width:900px){
  .brand{ font-size:1.4rem; line-height:1.2; }
}

.main-site-link {
  margin-left: auto;              /* pushes it to the right side */
  color: var(--primary);          /* your blue */
  font-weight: 600;
  text-decoration: none;
}
.main-site-link:hover {
  text-decoration: underline;
  color: var(--accent);           /* your red */
}

/* Main */
.container{
  max-width:980px;margin:30px auto;padding:24px;background:var(--card);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.35)
}
h1{margin:0 0 6px} .subtitle{color:var(--muted);margin-top:0}
/* Form */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto; /* ZIP, Email stretch; Newsletter + Button shrink */
  gap: .75rem;
  align-items: end;
  margin-top: 14px;
}
/* Force full-width row inside the grid */
.form .full {
  grid-column: 1 / -1;   /* span across all grid columns */
  margin-top: 1rem;
}
/* Keep rocker label aligned */
.form label {
  display:flex;
  flex-direction:column;
  font-size:.9rem;
  color:var(--text);
}
.form label .checkbox-wrapper-55 {
  margin-top:.3rem;
}
.form label.newsletter-label {
  font-size: .85rem;   /* slightly smaller text */
  white-space: nowrap; /* keep it on one line */
}

/* Checkbox styling */
.checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  color: var(--text);
}
.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* Name fields in a 2-column grid */
.names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 640px){
  .names { grid-template-columns: 1fr; }
}
label{display:flex;flex-direction:column;font-size:.9rem;color:var(--text)}

input {
  margin-top:.3rem;
  padding:.7rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--input-text);
  outline:none;
}

input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,83,142,.25);
}
select {
  margin-top:.3rem;
  padding:.7rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--input-bg);
  color: var(--input-text);
  outline: none;
  appearance: none;      /* removes native OS styling so colors apply */
  -webkit-appearance: none;
  -moz-appearance: none;
}
select {
  background: var(--input-bg) url("data:image/svg+xml;utf8,<svg fill='%23a9b4c2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 0.75rem center;
  background-size: 1em;
  padding-right: 2rem; /* space for arrow */
}

select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,83,142,.25);
}

button{
  padding:.8rem 1.1rem;border-radius:12px;border:none;background:var(--primary);
  color:var(--primary-contrast);font-weight:700;cursor:pointer
}
button:hover{
  filter:none;
  background-image: linear-gradient( to bottom, var(--primary-strong), #00538e );
}
.helper{margin-top:1rem;font-size:.9rem;color:var(--muted)}
code{background:#0b1320;padding:.25rem .4rem;border-radius:6px}
/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* desktop/tablet */
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }  /* phones */
}

.card {
  background: var(--card);        /* was #0e1621 */
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.card h3 {
  margin: .2rem 0 .4rem;
  font-size: 1.05rem;
}

.meta {
  color: var(--muted);            /* was #a1adbb */
  font-size: .9rem;
  margin-bottom: .25rem;
}

.amount {
  font-weight: 800;
  margin: .25rem 0;
  color: var(--accent);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .35rem 0;
}

.tag {
  font-size: .75rem;
  border: 1px solid var(--border);
  padding: .15rem .4rem;
  border-radius: 999px;
}

.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.link {
  color: var(--primary);
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}

.section-title {
  margin-top: 1.4rem;
  padding-top: .4rem;
  border-top: 1px dashed var(--border);
}

.count-pill {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(0,83,142,.12);
  color: var(--text);
  font-size: .85rem;
  border: 1px solid rgba(0,83,142,.25);
}

footer {
  margin-top: 1.25rem;
  color: var(--muted);
}

@media (max-width:820px){
  .form { grid-template-columns:1fr }
  button { width:100% }
}


/* SWITCH */
.checkbox-wrapper-55 input[type="checkbox"] {
visibility: hidden;
display: none;
}

.checkbox-wrapper-55 *,
.checkbox-wrapper-55 ::after,
.checkbox-wrapper-55 ::before {
box-sizing: border-box;
}

.checkbox-wrapper-55 .rocker {
    display: inline-block;
    position: relative;
    /*
    SIZE OF SWITCH
    ==============
    All sizes are in em - therefore
    changing the font-size here
    will change the size of the switch.
    See .rocker-small below as example.
    */
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #888;
    width: 7em;
    height: 4em;
    overflow: hidden;
    border-bottom: 0.5em solid var(--surface); /* subtle edge */
}

.checkbox-wrapper-55 .rocker-small {
font-size: 0.75em;
}

.checkbox-wrapper-55 .rocker::before {
content: "";
position: absolute;
top: 0.5em;
left: 0;
right: 0;
bottom: 0;
background-color: #999;
border: 0.5em solid var(--surface);
border-bottom: 0;
background-color: var(--surface);
}

.checkbox-wrapper-55 .switch-left,
.checkbox-wrapper-55 .switch-right {
cursor: pointer;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 2.5em;
width: 3em;
transition: 0.2s;
user-select: none;
}

.checkbox-wrapper-55 .switch-left {
height: 2.4em;
width: 2.75em;
left: 0.85em;
bottom: 0.4em;
background-color: #ddd;
transform: rotate(15deg) skewX(15deg);
}

.checkbox-wrapper-55 .switch-right {
right: 0.5em;
bottom: 0;
background-color: #bd5757;
color: #fff;
}

.checkbox-wrapper-55 .switch-left::before,
.checkbox-wrapper-55 .switch-right::before {
content: "";
position: absolute;
width: 0.4em;
height: 2.45em;
bottom: -0.45em;
background-color: #ccc;
transform: skewY(-65deg);
}

.checkbox-wrapper-55 .switch-left::before {
left: -0.4em;
}

.checkbox-wrapper-55 .switch-right::before {
right: -0.375em;
background-color: transparent;
transform: skewY(65deg);
}

.checkbox-wrapper-55 input:checked + .switch-left {
background-color: #0084d0;
color: #fff;
bottom: 0px;
left: 0.5em;
height: 2.5em;
width: 3em;
transform: rotate(0deg) skewX(0deg);
}

.checkbox-wrapper-55 input:checked + .switch-left::before {
background-color: transparent;
width: 3.0833em;
}

.checkbox-wrapper-55 input:checked + .switch-left + .switch-right {
background-color: #ddd;
color: #888;
bottom: 0.4em;
right: 0.8em;
height: 2.4em;
width: 2.75em;
transform: rotate(-15deg) skewX(-15deg);
}

.checkbox-wrapper-55 input:checked + .switch-left + .switch-right::before {
background-color: #ccc;
}

/* Keyboard Users */
.checkbox-wrapper-55 input:focus + .switch-left {
color: #333;
}

.checkbox-wrapper-55 input:checked:focus + .switch-left {
color: #fff;
}

.checkbox-wrapper-55 input:focus + .switch-left + .switch-right {
color: #fff;
}

.checkbox-wrapper-55 input:checked:focus + .switch-left + .switch-right {
color: #333;
}

select {
  margin-top:.3rem;
  padding:.7rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  color:var(--text);
  outline:none;
}
@media (max-width:820px){
  .form { grid-template-columns: 1fr !important; }
}

/* styles.css */
.actions { display:flex; gap:.6rem; align-items:end; }
.btn-secondary {
  display:inline-block;
  padding:.75rem 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--input-bg);   /* was #0d1620 */
  color: var(--input-text);      /* was var(--text) */
  text-decoration:none;
  font-weight:600;
  transition: background 0.2s ease, filter 0.2s ease;
}

.btn-secondary:hover {
  filter: brightness(1.05);
}

.card ul.helper li {
  margin: .3rem 0;
  font-size: .95rem;
}

.link.cta { font-weight:700; color: var(--accent); }
.link.cta:hover { text-decoration: underline; }

/* Special CTA link inside cards */
.cta-link {
  display: inline-block;
  margin-top: .75rem;
  padding: .5rem .9rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;

  background: var(--primary);
  color: var(--primary-contrast);
}

.cta-link:hover {
  background: var(--primary-strong);
  transform: translateY(-1px);
}

.rebate-callout {
  margin: .75rem 0;
  padding: .75rem 1rem;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: rgba(224,38,45,0.08); /* subtle red tint */
  text-align: center;
}

.rebate-callout .rebate-label {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: .25rem;
}

.rebate-callout .rebate-amount {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
}

.rebate-callout .rebate-note {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .2rem;
}
/* Nav layout */
.nav{
  max-width:980px;
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}

/* Push the theme toggle to the right end */
.theme-toggle-label{
  margin-left:auto;
  background:none;
  border:none;
  font:inherit;
  color:var(--text);
  cursor:pointer;
  padding:0;
  white-space:nowrap;
}

.theme-toggle-label .theme-label{
  font-weight:600;
  font-size:.95rem;
  color:var(--text);
}

.theme-toggle-label:hover .theme-label{
  text-decoration:underline;
}

/* If you previously had .main-site-link { margin-left:auto; } remove it OR keep it default */
.main-site-link{ /* no auto margin here */ }

@media (max-width:640px){
  .theme-toggle-label{ font-size:.9rem; margin-left:auto; }
}
/* Reset the theme toggle so it isn't styled like other buttons */
button.theme-toggle-label{
  all: unset;                 /* wipe all inherited/button styles */
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  color: var(--text);
  font: inherit;
}
button.theme-toggle-label {
  all: unset;                 /* reset default button */
  cursor: pointer;
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--text);
}

button.theme-toggle-label svg {
  width: 22px;
  height: 22px;
}

/* Base nav layout */
.nav{
  max-width:980px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
}

/* Desktop links group */
.nav-links{ display:flex; align-items:center; gap:16px; }

/* Theme icon button reset (from earlier Fix A) */
button.theme-toggle-label{
  all: unset; cursor:pointer; margin-left:auto; display:flex; align-items:center; color:var(--text);
}
button.theme-toggle-label svg{ width:22px; height:22px; }

/* Hamburger button (hidden on desktop) */
.menu-toggle{
  all: unset; cursor:pointer; display:none; color:var(--text);
  padding:6px; border-radius:8px;
}
.menu-toggle:hover{ background: color-mix(in oklab, var(--surface) 85%, transparent); }
.menu-toggle .icon-menu, .menu-toggle .icon-close{ width:22px; height:22px; }

/* Mobile panel (hidden by default) */
.mobile-menu{
  display:none; /* overridden when opened */
  border-top:1px solid var(--border);
  background: var(--surface);
}
.mobile-menu.open{ display:block; }
.mobile-link{
  display:block; padding:12px 20px; text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--border);
}
.mobile-link:last-child{ border-bottom:0; }
.mobile-link:hover{ background: color-mix(in oklab, var(--surface) 92%, transparent); }

/* --- Responsive behaviour --- */
@media (max-width: 820px){
  /* Hide desktop links; show hamburger */
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  /* Keep theme icon visible on mobile; move it left of hamburger */
  .theme-toggle-label{ margin-left:0; }
  .nav{ gap:10px; }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 820px) {
  /* hide the centered nav links on mobile */
  .nav-links {
    display: none;
  }

  /* show the hamburger on mobile */
  .menu-toggle {
    display: flex;
  }

  /* keep theme toggle visible too */
  .theme-toggle-label {
    display: flex;
  }
}