/*
Theme Name: Sandbar Fabrication
Theme URI: https://sandbarfab.com/
Author: Sandbar Fabrication
Author URI: https://sandbarfab.com/
Description: Commercial welding and steel fabrication site for Sandbar Fabrication, Rio Rancho, New Mexico. Nine fixed pages: home, commercial, site security, custom gates, loft ladders, film and TV, portfolio, about and contact.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sandbar-theme
*/

/* Sandbar Fabrication — site styles
   Mobile-first. No frameworks, no CDN, no build step.
   Colours live in the :root block below — change them there, once. */

:root{
  --ink:#0e1013;          /* page background          */
  --panel:#15181d;        /* raised panels            */
  --panel-2:#1b1f26;      /* alt sections             */
  --line:#2a3039;         /* borders                  */
  --text:#e7e9ec;         /* body text                */
  --dim:#9aa3af;          /* secondary text           */
  --gold:#e8a33d;         /* accent — from his gates  */
  --gold-dk:#c4852a;
  --wrap:1180px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 17px/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:62px;                /* room for the mobile call bar */
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15; margin:0 0 .5em; font-weight:800; letter-spacing:-.015em}
h1{font-size:2rem}
h2{font-size:1.6rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.lead{font-size:1.15rem; color:#cfd4db}
.muted{color:var(--dim); font-size:.95rem}
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  color:var(--gold); font-weight:700; margin:0 0 .6em
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:var(--gold); color:#000; padding:10px 14px; z-index:999}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--gold); color:#101215;
  font-weight:700; padding:13px 22px; border:2px solid var(--gold);
  border-radius:var(--r); text-decoration:none; cursor:pointer;
  font-size:1rem; letter-spacing:.01em
}
.btn:hover{background:var(--gold-dk); border-color:var(--gold-dk); text-decoration:none}
.btn-ghost{background:transparent; color:var(--gold)}
.btn-ghost:hover{background:rgba(232,163,61,.12); color:var(--gold)}
.btn-lg{padding:16px 26px; font-size:1.05rem}

/* ---------- header ---------- */
.site-head{
  background:rgba(14,16,19,.96); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50
}
.head-inner{display:flex; align-items:center; gap:14px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; margin-right:auto}
.brand:hover{text-decoration:none}
.brand-mark{
  width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  background:var(--gold); color:#101215; font-weight:900; border-radius:var(--r);
  letter-spacing:-.03em
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-size:.98rem; letter-spacing:-.01em}
.brand-text em{font-style:normal; font-size:.7rem; color:var(--dim)}
.head-call{display:none}
.navtoggle{
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  width:44px; height:40px; display:grid; place-content:center; gap:4px; cursor:pointer; padding:0
}
.navtoggle span{display:block; width:20px; height:2px; background:var(--text)}
#nav{display:none; width:100%; order:3}
#nav.open{display:block}
#nav ul{list-style:none; margin:6px 0 4px; padding:0}
#nav a{
  display:block; padding:12px 2px; color:var(--text); font-weight:600;
  border-bottom:1px solid var(--line)
}
#nav a[aria-current="page"]{color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center top}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,16,19,.30) 0%,rgba(14,16,19,.20) 38%,rgba(14,16,19,.92) 100%)
}
.hero-inner{position:relative; z-index:2; padding-top:60px; padding-bottom:40px}
.hero h1{font-size:2.1rem; text-shadow:0 2px 18px rgba(0,0,0,.6); margin-bottom:.45em}
.hero-sub{font-size:1.05rem; max-width:34em; color:#dfe3e8; text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin:1.3em 0 .9em}
.hero-meta{font-size:.85rem; color:#b9c0c9; margin:0}

/* ---------- stat band ---------- */
.band{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px 0; padding-top:22px; padding-bottom:22px}
.band-grid div{text-align:center; padding:10px 6px}
.band-grid strong{display:block; color:var(--gold); font-size:1.3rem; font-weight:800}
.band-grid span{font-size:.8rem; color:var(--dim)}

/* ---------- sections ---------- */
.section{padding:52px 0}
.section-alt{background:var(--panel-2)}
.sec-head{max-width:38em; margin-bottom:28px}
.sec-head p{color:var(--dim); margin:0}
.pagehead{padding:46px 0 10px; border-bottom:1px solid var(--line); background:var(--panel)}
.pagehead .lead{max-width:40em}

/* ---------- service cards ---------- */
.svc-grid{display:grid; gap:18px}
.svc-card{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; color:var(--text); text-decoration:none
}
.svc-card:hover{border-color:var(--gold); text-decoration:none}
.svc-img{aspect-ratio:4/3; overflow:hidden; background:#0a0c0e}
.svc-img img{width:100%; height:100%; object-fit:cover}
.svc-body{padding:20px}
.svc-body p{color:var(--dim); font-size:.95rem; margin-bottom:.8em}
.svc-num{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.14em;
  color:var(--gold); margin-bottom:.5em
}
.more{color:var(--gold); font-weight:700; font-size:.9rem}

/* ---------- split rows ---------- */
.split{display:grid; gap:26px}
.split-img img{width:100%; border-radius:var(--r); border:1px solid var(--line)}
.svc-full{border-top:1px solid var(--line)}
.svc-full .lead{color:var(--text)}

/* ---------- capability list ---------- */
.caps{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.caps li{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--r); padding:14px 16px
}
.caps strong{display:block; margin-bottom:2px}
.caps span{color:var(--dim); font-size:.92rem}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:18px; counter-reset:s}
.steps li{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.step-n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--gold); color:#101215; font-weight:800; margin-bottom:10px
}
.steps p{margin:0; color:var(--dim); font-size:.95rem}

/* ---------- galleries ---------- */
.gal-head{
  border-left:3px solid var(--gold); padding-left:12px; margin-bottom:22px
}
.gallery{display:grid; gap:16px}
.tile{margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.tile img{width:100%; aspect-ratio:3/4; object-fit:cover}
.tile figcaption{padding:12px 14px; font-size:.86rem; color:var(--dim); line-height:1.45}
.strip{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.strip figure{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.strip img{width:100%; aspect-ratio:1/1; object-fit:cover}
.videowrap{max-width:360px}
.videowrap video{width:100%; border-radius:var(--r); border:1px solid var(--line); background:#000}
.caption{font-size:.9rem; color:var(--dim); margin-top:12px}

/* ---------- CTA ---------- */
.cta{background:var(--gold); color:#101215; padding:46px 0; text-align:center}
.cta h2{margin-bottom:.3em}
.cta p{max-width:34em; margin:0 auto 1em; color:#2a2008}
.cta-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.cta .btn{background:#101215; color:var(--gold); border-color:#101215}
.cta .btn:hover{background:#000; border-color:#000}
.cta .btn-ghost{background:transparent; color:#101215; border-color:#101215}
.cta .btn-ghost:hover{background:rgba(0,0,0,.1); color:#101215}

/* ---------- contact ---------- */
.contact-grid{display:grid; gap:34px}
.callcard{
  display:block; background:var(--panel); border:2px solid var(--gold);
  border-radius:var(--r); padding:20px; text-align:center; color:var(--text);
  text-decoration:none; margin-bottom:18px
}
.callcard:hover{background:#1b1f26; text-decoration:none}
.callcard-label{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; color:var(--dim)}
.callcard-num{display:block; font-size:1.9rem; font-weight:800; color:var(--gold); margin:.15em 0}
.callcard-hint{display:block; font-size:.8rem; color:var(--dim)}
.big{font-size:1.05rem; font-weight:600}
.contact-side h3{margin-top:1.4em}
.contact-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.contact-form label{display:block; font-weight:700; font-size:.9rem; margin:16px 0 6px}
.contact-form input,.contact-form textarea{
  width:100%; background:#0d0f12; border:1px solid var(--line); border-radius:var(--r);
  color:var(--text); padding:12px 13px; font:inherit; font-size:16px  /* 16px stops iOS zoom */
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.contact-form button{margin-top:20px; width:100%}
.formnote{font-size:.86rem; color:var(--dim); margin-top:14px}

/* ---------- footer ---------- */
.site-foot{background:var(--panel); border-top:1px solid var(--line); padding:40px 0 10px; margin-top:0}
.foot-grid{display:grid; gap:26px}
.foot-grid h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold)}
.foot-grid p{font-size:.93rem; color:var(--dim); margin:0 0 .6em}
.foot-grid a{color:var(--text)}
.foot-brand{font-weight:800; color:var(--text) !important; font-size:1.05rem !important}
.foot-base{border-top:1px solid var(--line); margin-top:28px; padding-top:16px}
.foot-base p{font-size:.82rem; color:var(--dim); margin:0}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--gold); color:#101215; text-align:center;
  font-weight:800; font-size:1.05rem; padding:17px 10px; text-decoration:none;
  box-shadow:0 -4px 18px rgba(0,0,0,.45)
}
.callbar:hover{text-decoration:none; background:var(--gold-dk)}
.callbar-ico{margin-right:6px}

/* ================= tablet ================= */
@media (min-width:640px){
  h1{font-size:2.5rem}
  .hero h1{font-size:2.8rem}
  .band-grid{grid-template-columns:repeat(4,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(4,1fr)}
}

/* ================= desktop ================= */
@media (min-width:900px){
  body{padding-bottom:0}
  .callbar{display:none}
  h1{font-size:3rem}
  h2{font-size:2rem}
  .section{padding:76px 0}
  .navtoggle{display:none}
  #nav{display:block; width:auto; order:0}
  #nav ul{display:flex; gap:26px; margin:0}
  #nav a{border:0; padding:6px 0; font-size:.95rem}
  #nav a:hover{color:var(--gold); text-decoration:none}
  .head-call{
    display:inline-block; background:var(--gold); color:#101215; font-weight:800;
    padding:10px 16px; border-radius:var(--r); margin-left:20px; font-size:.95rem
  }
  .head-call:hover{background:var(--gold-dk); text-decoration:none}
  .hero{min-height:82vh; align-items:center}
  .hero h1{font-size:3.4rem; max-width:15em}
  .hero-inner{padding-top:0; padding-bottom:0}
  .hero::after{
    background:linear-gradient(90deg,rgba(14,16,19,.93) 0%,rgba(14,16,19,.80) 46%,rgba(14,16,19,.30) 100%)
  }
  .hero-media img{object-position:center 28%}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .caps{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1.1fr .9fr; align-items:center; gap:48px}
  .svc-full.flip .split-text{order:2}
  .contact-grid{grid-template-columns:.8fr 1.2fr; gap:52px; align-items:start}
  .contact-form{padding:32px}
}

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

/* ---------- added for commercial / spec pages ---------- */
.speclist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.speclist li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:18px 20px}
.speclist h3{margin:0 0 .3em;font-size:1.02rem}
.speclist p{margin:0;color:var(--dim);font-size:.94rem}
.note-box{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r);
  padding:14px 16px;font-size:.93rem;color:var(--dim)}
.note-box strong{color:var(--text)}
.opt{font-weight:400;color:var(--dim);font-size:.85rem}
.contact-form select{width:100%;background:#0d0f12;border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);padding:12px 13px;font:inherit;font-size:16px}
.contact-form select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.split-img .videowrap{max-width:320px}
@media (min-width:640px){ .speclist{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){
  .speclist{grid-template-columns:repeat(2,1fr)}
  #nav ul{gap:18px}
  #nav a{font-size:.9rem}
  .head-call{margin-left:14px;padding:9px 13px;font-size:.9rem}
  .brand-text em{max-width:220px}
}
@media (min-width:1080px){ #nav ul{gap:24px} #nav a{font-size:.95rem} }

/* ===================================================================
   RENDER FIXES — applied after viewing the site in a real browser
   =================================================================== */

/* 1. Mobile hero: the sunflower gate is a bright image and white text was
      washing out over the gold. Much stronger scrim on small screens. */
@media (max-width:899px){
  .hero::after{
    background:linear-gradient(180deg,
      rgba(14,16,19,.58) 0%,
      rgba(14,16,19,.66) 40%,
      rgba(14,16,19,.80) 70%,
      rgba(14,16,19,.96) 100%)
  }
  .hero h1,.hero-sub{text-shadow:0 2px 14px rgba(0,0,0,.85)}
  .hero .eyebrow{letter-spacing:.1em;font-size:.66rem;text-shadow:0 1px 8px rgba(0,0,0,.9)}
}

/* 2. Desktop nav was wrapping every two-word label onto two lines. */
@media (min-width:900px){
  .head-inner{flex-wrap:nowrap}
  #nav a{white-space:nowrap}
  .head-call{white-space:nowrap}
  .brand-text em{display:none}          /* frees ~140px of header width */
}
@media (min-width:1100px){
  .brand-text em{display:block}
}

/* 3. Four service cards were sitting 3 + 1. Give them one clean row when
      there's room for it. */
@media (min-width:1150px){
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .svc-body p{font-size:.9rem}
}

/* 4. Contact page: left column is much shorter than the form, which left a
      large void on desktop. Pin it to the top and let it breathe. */
@media (min-width:900px){
  .contact-side{position:sticky;top:96px}
}

/* 5. Eyebrow was orphaning "LOS LUNAS" onto a second line on narrow phones. */
@media (max-width:480px){
  .hero .eyebrow{font-size:.58rem;letter-spacing:.06em}
}
/* 6. Brand tagline was wrapping to two lines in the desktop header. */
@media (min-width:1100px){
  .brand-text em{white-space:nowrap}
}

/* 7. BUG: with the mobile menu open, #nav became a flex item in the header row
      and sat beside the brand instead of dropping below it — squashing the
      logo into a narrow column. The header flex row never allowed wrapping. */
.head-inner{flex-wrap:wrap}
#nav{flex-basis:100%}
@media (min-width:900px){
  .head-inner{flex-wrap:nowrap}
  #nav{flex-basis:auto}
}

/* 8. Nav grew from 8 to 9 items with the Site Security page. Tighten the
      middle breakpoints so it still sits on one line. */
@media (min-width:900px) and (max-width:1249px){
  #nav ul{gap:13px}
  #nav a{font-size:.83rem}
  .head-call{margin-left:10px;padding:9px 11px;font-size:.84rem}
  .brand-text em{display:none}
}
@media (min-width:1250px){
  #nav ul{gap:19px}
  #nav a{font-size:.9rem}
  .brand-text em{display:block;white-space:nowrap}
}