/*
Theme Name: Broyles Vending Starter
Theme URI: https://broylesvending.com/
Author: OpenAI
Description: A lightweight starter WordPress theme for Broyles Vending.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: broyles-vending-starter
*/

:root{
  --bv-blue:#114b8b;
  --bv-red:#c93c3c;
  --bv-navy:#0f172a;
  --bv-text:#1f2937;
  --bv-muted:#6b7280;
  --bv-bg:#f8fafc;
  --bv-card:#ffffff;
  --bv-border:#e5e7eb;
  --bv-white:#ffffff;
  --bv-radius:18px;
  --bv-shadow:0 18px 50px rgba(15,23,42,.08);
  --bv-max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--bv-text);
  background:#fff;
  line-height:1.6;
}
a{color:var(--bv-blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bv-border);
}
.wrap{max-width:var(--bv-max); margin:0 auto; padding:0 22px;}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:74px; gap:24px;
}
.site-branding{
  display:flex; align-items:center; gap:14px; font-weight:700;
}
.site-title{font-size:1.25rem; color:var(--bv-navy)}
.site-description{font-size:.92rem; color:var(--bv-muted)}
.site-logo img{max-height:54px; width:auto}
.primary-nav ul{
  list-style:none; display:flex; gap:24px; margin:0; padding:0;
}
.primary-nav a{color:var(--bv-text); font-weight:600}
.header-cta{
  display:inline-block; background:var(--bv-blue); color:#fff; padding:12px 18px;
  border-radius:12px; font-weight:700;
}
.header-cta:hover{color:#fff; text-decoration:none; opacity:.92}
.hero{
  background:
    linear-gradient(135deg, rgba(17,75,139,.94), rgba(15,23,42,.92)),
    radial-gradient(circle at top right, rgba(201,60,60,.32), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  color:#fff;
}
.hero-inner{
  max-width:var(--bv-max); margin:0 auto; padding:96px 22px 88px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:center;
}
.hero h1{
  font-size:clamp(2.3rem, 5vw, 4.4rem); line-height:1.04; margin:0 0 16px;
}
.hero .sub{
  font-size:1.25rem; font-weight:700; margin:0 0 10px; color:#e5efff;
}
.hero p{
  font-size:1.08rem; max-width:720px; margin:0 0 26px; color:#eef4ff;
}
.button-row{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:14px 20px; border-radius:14px; font-weight:700;
  border:2px solid transparent;
}
.btn-primary{background:#fff; color:var(--bv-blue)}
.btn-secondary{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn:hover{text-decoration:none; opacity:.95}
.hero-card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  padding:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.15);
}
.hero-card h3{margin:0 0 10px; font-size:1.35rem}
.hero-card ul{margin:0; padding-left:18px}
.section{padding:78px 0}
.section.alt{background:var(--bv-bg)}
.section h2{
  font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.1;
  margin:0 0 14px; color:var(--bv-navy)
}
.lead{font-size:1.08rem; color:var(--bv-muted); max-width:760px}
.grid-4{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px;
}
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;
}
.card{
  background:var(--bv-card); border:1px solid var(--bv-border); border-radius:var(--bv-radius);
  box-shadow:var(--bv-shadow); padding:24px;
}
.card h3{margin:0 0 10px; font-size:1.2rem}
.card p{margin:0; color:var(--bv-muted)}
.kicker{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:rgba(17,75,139,.08); color:var(--bv-blue); font-weight:700; margin-bottom:12px;
}
.service-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:28px;
}
.service-item{
  border:1px solid var(--bv-border); border-radius:16px; padding:18px 20px; background:#fff;
  font-weight:700;
}
.area-strip{
  margin-top:24px; padding:18px 20px; border-radius:16px; background:#fff;
  border:1px solid var(--bv-border); color:var(--bv-muted); font-weight:700;
}
.contact-box{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px;
}
.contact-card{
  background:#fff; border:1px solid var(--bv-border); border-radius:var(--bv-radius);
  box-shadow:var(--bv-shadow); padding:24px;
}
.contact-actions{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;
}
.form-placeholder{
  border:2px dashed #cbd5e1; border-radius:16px; padding:22px; background:#f8fafc;
}
.form-placeholder code{
  display:block; background:#fff; padding:12px; border-radius:10px; overflow:auto; margin-top:10px;
}
.site-footer{
  background:var(--bv-navy); color:#cbd5e1; padding:28px 0; margin-top:0;
}
.site-footer a{color:#fff}
.footer-inner{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;
}
.content-area{padding:54px 0}
.entry-card{
  max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--bv-border);
  border-radius:var(--bv-radius); box-shadow:var(--bv-shadow); padding:36px;
}
.entry-title{margin-top:0; color:var(--bv-navy)}
.notice{
  background:#eff6ff; border-left:4px solid var(--bv-blue); padding:14px 16px; border-radius:10px;
}
@media (max-width: 960px){
  .hero-inner, .contact-box{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .service-list{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap; padding:10px 0}
}
@media (max-width: 640px){
  .primary-nav ul{flex-wrap:wrap; gap:14px}
  .grid-4{grid-template-columns:1fr}
  .hero-inner{padding:78px 20px 70px}
  .hero h1{font-size:2.25rem}
}