:root { --pad: 16px; --radius: 14px; }

/* Global / Background */
*{box-sizing:border-box}
body{
  margin:0;
  /* Background: soft white overlay over the vintage map so text stays readable */
  background:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
    url("/images/old-map-calc-bg.png") no-repeat center center fixed;
  background-size: cover;
  color:#0f172a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}

/* Container & Layout */
.container{max-width:940px;margin:0 auto;padding:0 var(--pad)}
header{padding:24px 0 8px}
.brand{display:flex;align-items:center;gap:10px}

/* If you’re using the old “ZT” box logo, keep this.
   If you switch to an <img class="logo-img">, use the .logo-img rule below. */
.logo{width:36px;height:36px;border-radius:8px;background:#0ea5e9;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.logo-img{height:90px;width:auto;border-radius:8px} /* use when you add <img class="logo-img" ...> */

.nav{display:flex;gap:14px;margin-top:8px}
.nav a{color:#0ea5e9;text-decoration:none}
.nav a:hover{text-decoration:underline}
h1{margin:0 0 4px;font-size:24px}
.muted{color:#64748b}
.small{font-size:12px;color:#475569}

/* Card now slightly translucent so the background peeks through but stays readable */
.card{
  background:rgba(255,255,255,0.92);
  margin:12px 0 18px;
  padding:18px;
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(2,8,20,.12);
}

/* Center the calculator card and give it breathing room */
main.container.card {
  max-width: 740px;   /* narrower than the full container */
  margin: 8vh auto;   /* auto = horizontally center, 8vh adds top/bottom space */
}

/* Grid & Results */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.results{grid-template-columns:repeat(4,1fr);margin-top:12px}

/* Inputs & Buttons */
label{font-size:12px;color:#334155;display:block;margin-bottom:6px}
input[type="text"],input[type="number"]{
  width:100%;padding:12px;border:2px solid #64748b;border-radius:10px;font-size:16px;background:#fff;outline:none
}
input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
button{padding:12px 14px;border:0;border-radius:10px;background:#0ea5e9;color:#fff;font-size:16px;cursor:pointer}
button:disabled{opacity:.6;cursor:default}
.controls{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Status */
.status{margin-top:10px;min-height:18px;font-size:13px;color:#475569}
.ok{color:#059669}.err{color:#dc2626}

/* Info boxes */
.box{
  background:rgba(248,250,252,0.88);
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px;
  backdrop-filter:saturate(120%) blur(2px);
}
.big{font-size:22px;font-weight:700}

/* Ad placeholders */
.ad-slot{
  min-height:80px;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;border:1px dashed #e2e8f0;border-radius:10px;margin:8px 0 16px;
  background:rgba(255,255,255,0.6)
}
/* Temporarily hide ad placeholders */
.ad-slot {
  display: none !important; /* hides them entirely */
}

/* Footer */
footer{padding:10px 0 24px}

/* Responsive */
@media (max-width:780px){
  .grid{grid-template-columns:1fr}
  .results{grid-template-columns:1fr 1fr}
}
/* Float the About text directly on the background */
.about-section {
  max-width: 560px;     /* slimmer */
  margin: 16px auto 28px;
  background: transparent;   /* no box */
  padding: 0;                 /* remove padding */
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

/* Smaller, lighter typography tuned for background images */
.about-section h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.15); /* subtle readability pop */
}

.about-section p {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #1f2937; /* slightly darker for contrast */
  text-shadow: 0 1px 2px rgba(0,0,0,.12); /* very subtle */
}
/* Desktop default background */
body {
  margin: 0;
  background-image: url("/images/old-map-calc-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /* optional parallax effect */
}

/* Mobile/tablet: show whole image */
@media (max-width: 768px) {
  body {
    background-size: contain;   /* fit entire image */
    background-position: center top; /* anchor near top */
    background-color: #f6f7fb;  /* fill around edges */
    background-attachment: scroll; /* improves performance on mobile */
  }
}

/* Move nav links onto their own line below the brand on small screens */
.nav {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;            /* allow wrapping onto multiple lines */
  justify-content: flex-start; /* or center if you prefer */
}

/* On mobile: center the nav and give it a bit more space */
@media (max-width: 768px) {
  .nav {
    justify-content: center;   /* center horizontally on small screens */
    margin-top: 12px;
    font-size: 16px;           /* slightly larger for readability */
  }
  .nav a {
    color: #0f172a;            /* darker link color for contrast */
  }
}
/* Push nav further below the logo/title on mobile */
@media (max-width: 768px) {
  .nav {
    justify-content: center;
    margin-top: 35px;  /* was 12px; bump it down more */
    font-size: 16px;
  }
  .nav a {
    color: #0f172a; /* darker for contrast */
  }
}
@media (max-width: 768px) {
  .nav {
    justify-content: center;
    transform: translateX(-20px); /* negative moves left, positive moves right */
  }
}
.small-controls {
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.small-controls .chk {
  font-size: 14px;
  color: #334155;
}

/* Optional styling for the Clear button */
button.secondary {
  background: #e2e8f0;
  color: #0f172a;
}
.disclaimer {
  font-size: 12px;
  color: #000000;
  text-align: center;
  margin-top: 16px;
  opacity: 0.8;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.page-title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 24px auto 8px;
  color: #0f172a; /* dark navy */
}

.page-subtitle {
  font-size: 16px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 24px;
  color: #475569;
}