/* =========================================================
   Bexar Mechanical — styles.css
   Target: the provided index.html
   Notes:
   - Minimal, non-conflicting cascade
   - Brand palette (red/white/blue)
   - Buttons always have white text
   - Logo scales by width; preserved aspect ratio on mobile
   ========================================================= */

/* ---- Theme tokens ---- */
:root{
  --blue:#0a3d91;      /* brand blue */
  --red:#c2172c;       /* brand red */
  --white:#fff;
  --ink:#0f172a;       /* body text */
  --ink-2:#334155;     /* muted text */
  --bg:#f8fafc;        /* page background */
  --ring:rgba(10,61,145,.25);
  --radius:16px;

  --link:#0a3d91;
  --link-hover:#c2172c;
  --link-underline: color-mix(in srgb, var(--link) 55%, transparent);
}

/* Smooth scroll + anchor offset for sticky header */
html { scroll-behavior: smooth; }

/* Default offset; JS below will update this to match the real header height */
:root { --anchor-offset: 96px; }

/* Apply to any in-page anchor target (sections with IDs) */
[id] { scroll-margin-top: var(--anchor-offset); }

/* ---- Base / reset ---- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block }

/* ---- Layout helpers ---- */
.container{ max-width:1100px; margin-inline:auto; padding:0 1rem }
.section{ padding:4rem 0 }
.section-head h2{ margin:0 0 .25rem }
.section-head p{ margin:.25rem 0 0; color:var(--ink-2) }

/* ---- Global links (non-button) ---- */
a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.15em;
  text-decoration-color:var(--link-underline);
  transition:color .15s ease, text-decoration-color .15s ease;
}
a:hover{
  color:var(--link-hover);
  text-decoration-color:var(--link-hover);
}
a:visited{ color:var(--link) } /* prevent purple */
a:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px var(--ring);
  border-radius:6px;
}

/* ---- Header / brand / nav ---- */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg,var(--blue),#123d6b);
  color:var(--white);
  border-bottom:4px solid var(--red);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1rem;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  color:var(--white); text-decoration:none; font-weight:700;
}

/* Use the full logo lockup; scale by width (no distortion) */
.brand .logo{
  width: clamp(180px, 48vw, 340px);
  height: auto;
  aspect-ratio: 1280 / 501;
  display: block;
}

/* Optional: if a flag placeholder exists in markup, hide it */
.brand-flag{ display:none; }

/* Optional: if brand text remains next to the logo */
.brand-text b{ color:#fffb }

/* Header nav */
.nav{ display:flex; gap:.5rem; flex-wrap:wrap }

/* Ensure readable nav links on dark header */
.site-header .nav a{ color:#fff; text-decoration-color:rgba(255,255,255,.6) }
.site-header .nav a:hover{ color:#ffebee; text-decoration-color:#ffebee }

/* ---- Buttons (always white text) ---- */
.btn{
  border:0; border-radius:999px; padding:.6rem 1rem;
  font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; /* force white text */
  transition:
    transform .05s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}
.btn:link,
.btn:visited{ color:#fff; text-decoration:none }
.btn:hover,
.btn:focus-visible,
.btn:active{ color:#fff; text-decoration:none }
.btn:active{ transform:translateY(1px) }

.btn-link{ background:transparent }
.btn-primary{ background:var(--red); box-shadow:0 8px 22px rgba(194,23,44,.25) }
.btn-outline{ border:2px solid var(--white); background:transparent }

/* ---- Hero ---- */
.hero{
  position:relative; min-height:60vh;
  display:grid; place-items:center; overflow:clip;
}
.hero img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) }
.hero .overlay{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  color:var(--white); padding:2rem;
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.35));
}
.hero h1{ font-size:clamp(28px,4vw,48px); margin:0 0 .5rem }
.accent{ color:#ffebee }
.cta-row{ display:flex; gap:.75rem; justify-content:center; margin-top:1rem; flex-wrap:wrap }

/* ---- Trust strip ---- */
.trust-strip{
  background:var(--white);
  border-top:4px solid var(--red);
  border-bottom:1px solid #e5e7eb;
}
.trust-list{
  list-style:none; display:flex; gap:1.25rem; justify-content:space-between;
  padding:1rem 0; margin:0; flex-wrap:wrap;
}
.trust-list li{ font-weight:600; color:var(--ink-2) }

/* ---- Services cards ---- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem; margin-top:1rem;
}
.card{
  background:var(--white);
  border-radius:var(--radius);
  padding:1rem;
  border:1px solid #e6e8ef;
  box-shadow:0 6px 20px rgba(16,24,40,.04);
}
.card h3{ margin:.25rem 0 .35rem; color:var(--blue) }
.card p{ margin:0; color:var(--ink-2) }

/* ---- About grid ---- */
.grid.two{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:900px){ .grid.two{ grid-template-columns:1.2fr .8fr } }

.checklist{ margin:.5rem 0 0; padding:0 0 0 1.1rem }
.about-callout{
  background:linear-gradient(180deg,#fff,#f5f7fb);
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:1rem;
}

/* ---- One-up features ---- */
.one-up{ position:relative; margin:0 }
.one-up img{ width:100%; height:auto; max-height:70vh; object-fit:cover }
.caption{
  position:relative; display:block; margin:0; padding:.75rem 1rem;
  background:linear-gradient(90deg, rgba(10,61,145,.9), rgba(194,23,44,.9));
  color:#fff; font-weight:600;
}

/* ---- Map ---- */
#work-map{
  width:100%; height:min(70vh,680px);
  border-top:4px solid var(--blue);
  border-bottom:4px solid var(--red);
}

/* ---- Contact form ---- */
.form{
  background:var(--white);
  border:1px solid #e6e8ef;
  border-radius:var(--radius);
  padding:1rem;
}
.field{ display:grid; gap:.35rem; margin:.5rem 0 }
.field span{ font-weight:600 }
input, textarea{
  width:100%;
  padding:.7rem .85rem;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  outline-color:var(--ring);
}
input:focus, textarea:focus{ box-shadow:0 0 0 4px var(--ring) }
.actions{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.5rem }
.muted{ color:var(--ink-2) }

/* ---- Footer ---- */
.site-footer{
  background:linear-gradient(90deg,#0a3d91,#092b63);
  color:#e6ecff;
  padding:2rem 0;
  border-top:4px solid var(--red);
  margin-top:3rem;
}
.site-footer .container{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.site-footer a{ color:#dbe4ff; text-decoration-color:rgba(255,255,255,.6) }
.site-footer a:hover{ color:#fff; text-decoration-color:#fff }

/* ---- Responsive tweaks ---- */
@media (max-width: 640px){
  .site-header .container{ flex-wrap: wrap; gap:.5rem; }
  .nav{ width:100%; justify-content:center; }

  /* Cap logo height so header stays compact */
  .brand .logo{
    max-height:56px;                /* adjust 48–64px as desired */
    width:min(65vw, 320px);
  }
}

/* ---- Motion / a11y ---- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* Big, centered, responsive map card */
.map-card{
  /* center it on all viewports */
  margin: 1rem auto 0;

  /* let it breathe on phones and go large on desktop */
  width: clamp(320px, 96vw, 1400px);

  /* visuals */
  background: var(--white, #fff);
  border-radius: var(--radius, 16px);
  overflow: hidden;
  border: 4px solid var(--blue, #0a3d91);              /* brand border */
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Big, centered, responsive map card */
.map-card{
  margin: 1rem auto 0;
  /* use available content width (after body padding), cap on huge screens */
  width: min(100%, 1400px);

  background: var(--white, #fff);
  overflow: hidden;
  /* keep your border style of choice */
  border-top: 4px solid var(--blue, #0a3d91);
  border-bottom: 4px solid var(--red, #c2172c);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

.map-embed{
  display: block;
  width: 100%;
  height: clamp(420px, 68vh, 780px);
  border: 0;
}


/* If you prefer rounded corners instead, comment the 3 rules above
   and keep the original border + box-shadow from .map-card */

   /* ---- Mobile page gutters (left/right padding for the whole page) ---- */
:root{
  /* how much horizontal breathing room you want on small screens */
  --page-gutter: clamp(14px, 4vw, 28px);
}

/* Add side padding on phones/tablets; includes iPhone notches */
@media (max-width: 800px){
  body{
    padding-left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
  }
}

/* Full-bleed utility: makes a section span the viewport on mobile
   even though the <body> has side padding (gutters) */
@media (max-width: 800px){
  .full-bleed{
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
  }

  /* Restore comfortable inner padding for content inside full-bleed sections */
  .full-bleed > .container,
  .full-bleed .overlay{
    padding-left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
  }

  /* Ensure hero images actually fill the bleed width */
  .hero.one-up picture,
  .hero.one-up img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--blue);
  color: var(--white);
  padding: 1.5rem 1rem;
  font-size: 0.875rem;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}

/* Footer nav layout */
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}

/* Footer nav links */
.site-footer nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 2px;
}

/* Underline on hover with brand red */
.site-footer nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.18s ease-out;
}

.site-footer nav a:hover::after,
.site-footer nav a:focus-visible::after {
  width: 100%;
}

/* Desktop: put text on left, links on right */
@media (min-width: 768px) {
  .site-footer .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

/* Request Service form (Vercel + Resend) */
.service-form{
  max-width: 980px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid #e6e8ef;
  border-radius: var(--radius);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  box-shadow: 0 6px 20px rgba(16,24,40,.04);
}
.form-intro{
  margin: 0 0 1rem;
  color: var(--ink-2);
}
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
  margin-bottom: .85rem;
}
@media (max-width: 760px){
  .form-grid{ grid-template-columns: 1fr; }
}
.service-form .field{
  display: grid;
  gap: .35rem;
  margin: 0 0 .85rem;
}
.service-form .field span{
  font-weight: 600;
}
.service-form input,
.service-form textarea,
.service-form select{
  width: 100%;
  padding: .72rem .85rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.service-form input:focus,
.service-form textarea:focus,
.service-form select:focus{
  outline: 0;
  box-shadow: 0 0 0 4px var(--ring);
}
.service-form textarea{
  resize: vertical;
  min-height: 132px;
}
.check-row{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 .9rem;
}
.check-row input{
  width: auto;
  margin-top: .2rem;
}
.hp-field{
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-status{
  min-height: 1.25rem;
  margin: 0;
}
.form-status.is-success{ color: #166534; }
.form-status.is-error{ color: #9f1239; }
.form-note{ margin: .25rem 0 0; }