/* Modern single-page design styles for Tuskware */
:root{
  --bg1:#f7fafc;
  --card:#ffffff;
  --accent:#0b2239;
  --muted:#6b7280;
  --nav-h: 72px;    /* approximate navbar height used for scroll calculations */
  --footer-h: 96px;  /* footer height (visual overlay) - increased to prevent cutoff */
}
*{box-sizing:border-box}
html{
  /* Reduce overall typographic scale by 2pt and allow rem-based sizing to scale
     proportionally. Browsers treat 1rem as the root font-size (100% typically 16px). */
  font-size: calc(100% - 2pt);
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h); /* offset for fixed navbar */
}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg1),#e6eef8);
  color:var(--accent);
  /* Reserve space at the bottom equal to the footer height plus a small
     breathing room so the last line of content is not hidden beneath the
     fixed footer. This scales with the footer variable and the root font-size. */
  padding-bottom: calc(var(--footer-h) + 0.5em);
}

/* Section styling for single-page layout */
.section {
  /* Sections are full-viewport minus the fixed navbar height. Footer is an
     overlay (frozen) so content will scroll behind it. Center cards within
     the visible area between navbar and the bottom of the viewport. */
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
}

.section:first-of-type {
  padding-top: calc(var(--nav-h) + 1rem); /* Extra padding for first section below navbar */
}

.wrap{width:100%;max-width:760px;margin:0 auto;}
/* ensure page content is not hidden behind the fixed footer */
/* No body bottom padding — footer will be frozen and content should scroll behind it */
.card{
  background:var(--card);
  border-radius:14px;
  padding:2.25rem;
  box-shadow:0 10px 30px rgba(11,34,57,0.12);
  text-align:center;
  z-index:1;
  position:relative;
}
.logo{max-width:280px;width:60%;height:auto;margin:0 auto 1.25rem;display:block}
h1{font-size:2.25rem;margin:0 0 .5rem}
h2{font-size:1.125rem;margin:1.5rem 0 0.5rem}
.tagline{color:var(--muted);font-size:1.05rem;line-height:1.5;margin:0 0 1rem}
.blurb{margin:0 0 1.25rem;color:var(--muted)}
.subscribe{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap;flex-direction:column;max-width:400px;margin:0 auto}
.subscribe input[type="email"]{padding:.6rem .75rem;border-radius:8px;border:1px solid #d1d5db;min-width:220px}
.subscribe button{background:var(--accent);color:white;border:none;padding:.6rem .9rem;border-radius:8px;cursor:pointer}
.subscribe textarea {
  padding: .6rem .75rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  min-width: 220px;
  resize: vertical;
}
.note{font-size:.9rem;color:var(--muted);margin-top:1rem}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* stack brand above links */
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 1rem;
  background: var(--card);
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(11,34,57,0.12);
  z-index: 1000;
}
.nav-logo {
  max-width: 100px;
  height: auto;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  /* center links horizontally under the brand */
  position: static;
  transform: none;
  justify-content: center;
  align-items: center;
}
.nav-links li a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.nav-links li a:hover {
  background: rgba(11, 34, 57, 0.08);
}
.nav-links li a.active {
  color: var(--accent);
  background: rgba(11, 34, 57, 0.12);
  font-weight: 600;
}
@media (max-width:480px){
  .logo{max-width:200px}
  h1{font-size:1.6rem}
}



.with-bg .card {
  position: relative;
}
.with-bg .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('tuskware-logo2.jpeg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.08;
  z-index: -1;
}
.nav-brand {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--accent);
  margin: 0; /* centered above links */
  text-align: center;
}
.cta-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}
.cta-button {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  margin-top: 1rem;
  transition: background 0.3s ease;
}
.cta-button:hover {
  background: #0a1d2f;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  width: 100%;
  background: var(--card);
  /* remove direct padding on the container and enforce padding inside .footer-content */
  padding: 0;
  box-shadow: 0 -2px 10px rgba(11,34,57,0.12);
  z-index: 1100;
  display: flex;
  align-items: stretch;
}

/* Keep footer content layout similar but position its children toward the bottom */
.footer .footer-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: end; /* align content lower within the footer */
  padding: 0.6rem 1.25rem; /* enforce internal padding so text doesn't touch edges */
  height: 100%;
}

/* Center footer text horizontally within each grid cell */
.footer .footer-content {
  justify-items: center;
  text-align: center;
}
.footer-content {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.footer-section h3 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--accent);
}
.footer-section p {
  font-size: 0.85rem;
  margin: 0.25rem 0 0.4rem 0;
  color: var(--muted);
}
.footer-section a {
  color: var(--accent);
  text-decoration: none;
}
.footer-section a:hover {
  text-decoration: underline;
}
.legal-content {
  text-align: left;
  max-width: 800px;
}
.legal-content h1 {
  text-align: center;
}
.legal-content h2 {
  margin-top: 1.5rem;
}
.legal-content ul {
  margin-left: 1.5rem;
}
@media (max-width:768px){
  :root {
    --footer-h: 80px; /* Reduce footer height on tablets */
  }
  .footer-content {
    grid-template-columns: 1fr;
  }
  .footer .footer-content {
    padding: 0.4rem 0.75rem; /* Reduce padding on mobile */
    gap: 0.5rem;
  }
  .footer-section h3 {
    font-size: 0.85rem;
    margin: 0 0 0.35rem;
  }
  .footer-section p {
    font-size: 0.7rem;
    margin: 0.15rem 0 0.2rem 0;
  }
  .nav-brand {
    font-size: 0.9rem;
  }
  .navbar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  /* override centered absolute links on small screens */
  .nav-links {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }
  .nav-links li a {
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
  }
  .section {
    min-height: auto;
    padding: 3rem 1rem;
  }
  .section:first-of-type {
    padding-top: 5rem;
  }
}

@media (max-width:480px){
  :root {
    --footer-h: 70px; /* Further reduce footer height on small mobile screens */
  }
  .logo{max-width:200px}
  h1{font-size:1.6rem}
  .nav-brand {
    font-size: 0.85rem;
  }
  .footer .footer-content {
    padding: 0.3rem 0.5rem; /* Tighter padding on small screens */
    gap: 0.35rem;
  }
  .footer-section h3 {
    font-size: 0.75rem;
    margin: 0 0 0.25rem;
  }
  .footer-section p {
    font-size: 0.65rem;
    margin: 0.1rem 0 0.15rem 0;
    line-height: 1.3;
  }
}

/* Ensure lists used for "key benefits" inside cards are left-aligned and indented
   This overrides the general .card { text-align: center } so bullets and long lines
   align nicely for readability on product pages. */
.card ul.blurb {
  /* Use a consistent, centered block width for product lists so their left
     edges align vertically. The width is responsive: it will be 680px on
     larger screens and shrink on small viewports (calc ensures padding).
     Keep bullets close to the text using `list-style-position: inside`. */
  display: block;
  width: 680px;
  max-width: calc(100% - 4rem); /* allow breathing room on small screens */
  margin: 0.5rem auto; /* centers the block inside the card */
  list-style: disc inside;
  text-align: left;
  padding-left: 0.2rem; /* nudge list block closer to center while keeping bullets aligned */
}
.card ul.blurb li {
  margin-bottom: 0.45rem;
}