/* =========================================
   Freedom Vending — Responsive Master CSS
   (keeps red buttons, frosted look, watermark)
   + enhanced mobile menu (backdrop + "Menu")
   ========================================= */

/* Brand palette */
:root{
  --ink:#0b2a3c;
  --blue:#004a99;
  --muted:#344564;
  --bg:#f9fafb;
  --card:#ffffff;
  --line:#e7eef6;

  --red:#d13b37;
  --red-2:#b42f2b;

  --frost-bg: rgba(255,255,255,0.72);
  --frost-hero: rgba(255,255,255,0.60);
  --frost-card: rgba(255,255,255,0.82);
}

/* Reset & base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#333;
  background: var(--bg);
  line-height: 1.65;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Watermark behind everything, stays fixed */
body::before{
  content:"";
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw,720px);
  height:min(70vw,720px);
  background:url("../images/freedom-vending-logo.png") no-repeat center/contain;
  opacity:.08;
  z-index:-1;
  pointer-events:none;
}

/* Links & buttons */
a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

.btn{
  display:inline-block;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  padding:.9rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(209,59,55,.18);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ text-decoration:none; box-shadow: 0 10px 22px rgba(209,59,55,.22); }
.btn:active{ transform: translateY(1px); box-shadow: 0 4px 12px rgba(209,59,55,.18); }

/* Frosted header */
header{
  position: sticky;
  top:0;
  z-index:1000;
  background: var(--frost-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: .85rem 1rem;
  gap: 1rem;
}
.logo img{ height:64px; width:auto; }

/* Desktop nav */
.nav-links{
  list-style:none;
  display:flex;
  gap:1.25rem;
}
.nav-links a{
  color: var(--blue);
  font-weight:700;
  padding:.5rem .75rem;
  border-radius: 10px;
}
.nav-links a.active,
.nav-links a:hover{
  background:#eaf1fb;
  text-decoration:none;
}

/* Mobile trigger */
.nav-toggle{
  display:none;
  font-size:2rem;
  cursor:pointer;
  color: var(--blue);
  user-select:none;
}

/* Hero */
.hero{
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding: 3.5rem 2rem;
  text-align:center;
  background: var(--frost-hero);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}
.hero h1{
  font-size: clamp(1.9rem, 2.2vw + 1.2rem, 3rem);
  color: var(--blue);
  margin: 0 0 .6rem;
  line-height: 1.2;
}
.hero p{
  font-size: clamp(1.05rem, .6vw + .8rem, 1.25rem);
  color:#2f4f2f;
  margin: 0 0 1.25rem;
}

/* Feature cards */
.features{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 1.25rem auto;
  padding: 0 1rem;
}
.feature{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  text-align:left;
}
.feature h2{
  color: var(--blue);
  margin: 0 0 .4rem;
  font-size: 1.25rem;
}
.feature p{ color:#555; margin:0; }

/* Contact / content sections */
.contact-form-section{
  max-width: 900px;
  margin: 1.25rem auto 2.5rem;
  padding: 0 1rem;
  text-align: left;
}
.contact-form-section h1{
  color: var(--blue);
  text-align:center;
  margin: 0 0 .6rem;
}
.contact-form-section p{
  color: var(--muted);
  text-align:center;
  margin: 0 0 1.25rem;
}

/* Cards & forms */
.card{
  background: var(--frost-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 14px;
}
.contact-form label{
  font-weight:600;
  color: var(--blue);
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:.9rem .95rem;
  border:1px solid #dfe6f0;
  border-radius: 10px;
  background:#f7f9fc;
  font: inherit;
  font-size:1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form textarea{ min-height: 150px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;
  border-color:#a9c4ff;
  box-shadow: 0 0 0 3px rgba(30,77,107,.18);
}
.contact-form .btn{ align-self:center; min-width: 240px; }

/* Footer */
footer{
  margin-top: 2rem;
  background: var(--blue);
  color:#fff;
  text-align:center;
  padding: 1.25rem 1rem;
  font-size:.95rem;
}

/* Accessibility focus (keyboard) */
:focus-visible{
  outline: 3px solid #a9c4ff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===========================
   RESPONSIVE BREAKPOINTS
   =========================== */

/* Large desktops */
@media (min-width: 1200px){
  .navbar{ padding: 1rem 1.25rem; }
}

/* Tablets (700–1199px) */
@media (max-width: 1199px){
  .features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Phones (<700px) */
@media (max-width: 699px){
  /* Tighter rhythm */
  body{ line-height: 1.7; }

  /* Show hamburger */
  .nav-toggle{ display:block; }

  /* Backdrop behind menu (paired with JS) */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(5,10,20,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 998;
  }
  .nav-backdrop.show{
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile menu sheet */
  .nav-links{
    display:flex;
    flex-direction:column;
    position: fixed;
    inset: 64px 0 0 0;           /* under header */
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top:1px solid var(--line);
    padding: .75rem 1rem 2rem;
    gap: .25rem;
    z-index: 999;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-links.nav-active{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }

  /* Clear "Menu" label */
  .nav-links::before{
    content: "Menu";
    display: block;
    font-weight: 800;
    color: #0b2a3c;
    letter-spacing: .2px;
    padding: .25rem .25rem .75rem .25rem;
    margin: .25rem .25rem .5rem .25rem;
    border-bottom: 1px solid var(--line);
  }

  /* Bigger/tappable links with indicator dot */
  .nav-links a{
    color: var(--ink);
    padding: .95rem .75rem;
    border-radius: 12px;
    font-weight: 800;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.55rem;
  }
  .nav-links a::before{
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #dfe6f0;
    flex: 0 0 .5rem;
    transition: background .18s ease, transform .18s ease;
  }
  .nav-links a:hover,
  .nav-links a.active{ background:#eaf1fb; }
  .nav-links a:hover::before,
  .nav-links a.active::before{
    background: var(--red);
    transform: scale(1.1);
  }

  /* Header */
  header{ padding: 0; }
  .navbar{ padding: .7rem 1rem; }
  .logo img{ height: 54px; }

  /* Watermark smaller */
  body::before{
    width:min(88vw,520px);
    height:min(88vw,520px);
    opacity:.06;
    top:48%;
  }

  /* Hero */
  .hero{
    margin: .9rem auto 0;
    padding: 2.25rem 1.1rem;
    max-width: 94%;
    background: var(--frost-hero);
    border-radius: 14px;
  }
  .hero p{ margin-bottom: 1rem; }
  .btn{ min-width: 58%; text-align:center; }

  /* Features -> single column cards */
  .features{
    grid-template-columns: 1fr;
    max-width: 94%;
    gap: 1rem;
    padding: 1rem 1rem 0;
  }
  .feature{ padding: 1.1rem .95rem; }

  /* Forms */
  .contact-form-section{ max-width: 94%; padding: 1.25rem 1rem 2rem; }
  .contact-form{ padding: 1.25rem; gap: .9rem; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select{ font-size: 1rem; padding: .85rem .9rem; }
  .contact-form textarea{ min-height: 160px; }

  /* Section spacing */
  main > section + section{ margin-top: 1rem; }

  /* Footer */
  footer{ margin-top: 1.25rem; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; }
}