/* Hardware Pizza — static rebuild of the Breakdance/WordPress site.
   Values match the original post-147 (header), post-138 (home), post-157 (footer),
   global-settings and awesome-menu CSS. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;line-height:1.4;-webkit-text-size-adjust:100%}
body{margin:0;background-color:#f9fafb;color:#374151;font-family:"Roboto",sans-serif;font-size:16px}
img{display:block;max-width:100%;height:auto;border-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.2;color:#111827;margin:0;max-width:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:#3b82f6}
a:hover{color:#2563eb}
button{font-family:inherit}

/* Sections */
.section{position:relative;width:100%;background-position:center center;background-size:cover}
.container{max-width:1120px;margin:0 auto;padding:100px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.overlay{position:absolute;inset:0}
.cols{display:flex;flex-direction:row;flex-wrap:nowrap;gap:32px;width:100%;max-width:100%}
.col{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;width:calc(33.33% - 21.33px);position:relative}
.text{max-width:100%;margin:0;color:#374151}
.rule{width:100%;max-width:100%;border-top:2px solid #00000026}

/* Buttons (Breakdance "custom" button atom) */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;line-height:1;text-align:center;text-decoration:none;padding:14px 24px;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:all .3s ease-in-out;color:#000}
.btn:hover{color:#000}
.btn--white{background:#fff;font-size:13px;font-weight:600}
.btn--grey{background:#e6e6e6;font-size:13px;font-weight:500}

/* Header (overlays the hero) */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:199;background:transparent}
.header-inner{max-width:1120px;margin:0 auto;padding:20px 20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:20px}
.header-row{width:1200px;max-width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
.brand,.brand:hover{color:#fff;font-size:25px;font-weight:200;text-decoration:none;display:flex}
.header-rule{width:1200px;max-width:100%;border-top:2px solid #fff}

.menu{position:relative;-webkit-font-smoothing:antialiased}
.menu-list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.menu-item{position:relative;color:#fff}
.menu-item::before{content:"";position:absolute;inset:0;border-radius:6px;background-color:#d1d5db12;transform:scaleX(0);transform-origin:center;transition:.3s transform ease,.3s opacity ease;pointer-events:none}
.menu-item:hover::before{transform:none}
.menu-link{position:relative;z-index:1;display:flex;align-items:center;font-size:14px;font-weight:500;line-height:1;text-decoration:none;color:#fff;padding:8px 16px;white-space:nowrap;transition:.3s color ease}
.menu-item:hover .menu-link{color:#f9fafb}
.menu-toggle{display:none;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer;min-height:44px;min-width:44px}
.menu-toggle-lines{position:relative;display:block;width:32px;height:3px;border-radius:2px;background:#fff;transition:background-color .2s ease .15s}
.menu-toggle-lines::before,.menu-toggle-lines::after{content:"";position:absolute;left:0;width:32px;height:3px;border-radius:2px;background:#fff;transition:top .2s cubic-bezier(.4,0,.2,1) .2s,transform .3s cubic-bezier(.4,0,.2,1)}
.menu-toggle-lines::before{top:-9px}
.menu-toggle-lines::after{top:9px}
.menu.is-open .menu-toggle-lines{background:transparent;transition-delay:0s}
.menu.is-open .menu-toggle-lines::before,.menu.is-open .menu-toggle-lines::after{top:0;transition:top .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1) .2s}
.menu.is-open .menu-toggle-lines::before{transform:rotate(45deg)}
.menu.is-open .menu-toggle-lines::after{transform:rotate(-45deg)}

/* Hero (post-138 section 102) */
.hero{background-image:url(/assets/img/hero.jpg);background-color:#171619;background-repeat:no-repeat;background-attachment:fixed}
.hero .overlay{background-color:#1716198a}
.hero .container{min-height:90vh;padding:0;justify-content:center}
.hero h1{width:560px;color:#f9fafb;font-size:30px;font-weight:200;margin-bottom:36px}

/* Story + info (section 110) */
.story .container{padding-top:88px;padding-bottom:120px}
.story h2{width:1200px;color:#111827;font-family:"Roboto",sans-serif;font-size:17px;font-weight:600;margin-bottom:12px}
.story .story-text{width:1200px;font-size:16px;margin-bottom:96px}
.info{margin-top:100px}
.info h1{font-size:28px;font-weight:200}
.info .t-phone{font-weight:300;margin-top:15px}
.info .t-addr{font-weight:300;margin-top:22px}
.info .t-hours{font-weight:400;margin-top:22px}
.info .t-closed{font-weight:700;margin-top:22px}
.info .t-note{font-size:21px;font-weight:200;margin-top:37px}
.info .t-dl{font-size:15px;font-weight:300;margin-top:23px}
.info .btn{margin-top:28px}

/* Photo band (section 144) */
.band{background-image:url(/assets/img/interior.jpg);background-color:#000;background-repeat:no-repeat;background-attachment:fixed}
.band .overlay{background-color:#00000075}
.band .container{min-height:90vh;padding-top:120px;padding-bottom:120px;justify-content:center}

/* Footer (post-157) */
.site-footer{background-color:#000}
.site-footer .container{padding-top:40px;padding-bottom:35px}
.footer-links{width:500px;max-width:100%}
.footer-links a,.footer-links a:hover{color:#fff;text-decoration:none;display:flex}
.copyright{color:#fff;font-size:15px;font-weight:200;margin-top:35px;text-align:center}

@media (max-width:1119px){
  .cols{flex-direction:column}
  .cols>.col{width:100%}
}
@media (max-width:1023px){
  .menu-toggle{display:flex}
  .site-header .header-inner{position:relative}
}
@media (max-width:1023px) and (hover:none){
  /* fixed backgrounds are unsupported on most phones; scroll them instead */
  .hero,.band{background-attachment:scroll}
}

/* ===== Contact page (post-183 header, post-142 page, form.css) ===== */

/* Solid header (post-183): black bar, not an overlay */
.site-header--solid{position:relative;z-index:199;background:#000}
.header-bar{max-width:1200px;margin:0 auto;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-header--solid .brand,.site-header--solid .brand:hover{font-size:26px;font-weight:200}
.menu--underline .menu-item{font-size:15px;font-weight:100}
.menu--underline .menu-item::before{inset:auto 0 0 0;height:2px;border-radius:0;background-color:#fff}
.menu--underline .menu-link{font-size:16px;font-weight:300}

/* Map section (142-100) */
.contact-map .container{max-width:100%;padding:0 0 118px}
.contact-map .map{width:75%;max-width:100%;height:470px;margin-top:61px;filter:grayscale(1)}
.contact-map .map iframe{display:block}
.contact-map h1{color:#0000008c;font-family:"Roboto",sans-serif;font-size:30px;font-weight:300;margin-top:100px}
.contact-map .text{color:#000000a1;font-size:20px;font-weight:300;margin-top:22px}

/* Contact columns (142-107) */
.contact-main .container{align-items:flex-start;text-align:left}
.cols--2>.col{width:calc(50% - 16px);align-items:flex-start;text-align:left}
.contact-main h1{font-family:"Roboto",sans-serif;font-size:25px}
.contact-main .col>div{max-width:100%;display:flex;flex-direction:column;align-items:flex-start}
.contact-copy{width:562px;max-width:100%;color:#0000007a;margin-top:15px}

/* Form (form.css + 142-121) */
.contact-form{width:100%;display:flex;flex-direction:column;gap:12px;color:#374151}
.form-field{width:100%}
.form-label{display:block;font-weight:500;color:#374151;margin:0;cursor:pointer}
.form-required{color:#b91c1c;padding-left:4px;display:inline-block}
.form-input{display:block;width:100%;margin:0;font-family:inherit;font-size:16px;line-height:1;color:#374151;padding:12px 16px;border:0;border-radius:3px;background-color:#00000014;appearance:none;-webkit-appearance:none;transition:background-color .3s,box-shadow .3s}
textarea.form-input{line-height:1.4;min-height:100px;resize:vertical;overflow:auto;vertical-align:top}
.form-input:focus{background-color:#f9fafb;box-shadow:0 0 12px 0 #3b82f666;outline:0}
.form-footer{width:100%;display:flex;justify-content:flex-end;align-items:end}
.form-submit,.form-submit:hover{background:#000;color:#fff;font-family:"Roboto",sans-serif;font-size:16px;font-weight:500}
.form-submit:focus{box-shadow:0 0 12px 0 #3b82f666;outline:0}
.form-submit:disabled{opacity:.6;cursor:default}
.form-message{width:100%;padding:16px;border-radius:4px;color:#1e805b;background-color:#edfbf6}
.form-message--error{color:#ef4444;line-height:1.4;background-color:#fef4f6}
.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

@media (max-width:1119px){
  .cols--2>.col{width:100%}
}
@media (max-width:1023px){
  .site-header--solid .header-bar{position:relative}
  .form-submit{width:100%}
}
@media (max-width:767px){
  .header-bar{flex-direction:column}
}


/* ===== Full-screen mobile menu (both headers) ===== */
@media (max-width:1023px){
  .site-header .brand,.menu-toggle{position:relative;z-index:1002}
  .menu-list{position:fixed;inset:0;z-index:1001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:120px 24px 60px;background:#000;
    clip-path:circle(0 at var(--menu-x,calc(100% - 42px)) var(--menu-y,42px));visibility:hidden;
    transition:clip-path .6s cubic-bezier(.77,0,.18,1),visibility 0s linear .6s}
  .menu.is-open .menu-list{clip-path:circle(150vmax at var(--menu-x,calc(100% - 42px)) var(--menu-y,42px));visibility:visible;transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s}
  .menu-item{overflow:hidden;padding:4px 0}
  .menu-item::before{display:none}
  .menu-link,.menu--underline .menu-link{position:relative;display:block;padding:6px 4px;background:none;color:#fff;font-size:44px;font-weight:200;letter-spacing:.06em;line-height:1.1;
    transform:translateY(110%);opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
  .menu.is-open .menu-link{transform:none;opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(.25s + var(--i,0) * .08s)}
  .menu-item:nth-child(2){--i:1}
  .menu-item:nth-child(3){--i:2}
  .menu-item:nth-child(4){--i:3}
  .menu-link::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}
  .menu-link:hover::after,.menu-link:focus-visible::after,.menu-link[aria-current="page"]::after{transform:scaleX(1)}
  .menu-link[aria-current="page"]::after{transition-delay:calc(.6s + var(--i,0) * .08s)}
  .menu:not(.is-open) .menu-link[aria-current="page"]::after{transform:scaleX(0);transition-delay:0s}
  .menu-link:hover{color:#fff}
  html.menu-locked,html.menu-locked body{overflow:hidden}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .menu-list,.menu.is-open .menu-list{transition:opacity .2s ease,visibility 0s;clip-path:none;opacity:0}
  .menu.is-open .menu-list{opacity:1}
  .menu-link,.menu.is-open .menu-link{transform:none;opacity:1;transition:none}
}

/* ===== Menu page (post-140) ===== */
.menu-page .container{justify-content:center;padding-bottom:260px}
.menu-page h1{font-family:"Roboto",sans-serif;font-size:51px;font-weight:300;text-align:center;margin-bottom:37px}
.menu-page .divider{width:300px;max-width:100%;border-top:1px solid #4b5563}
.menu-page .text{font-size:20px;font-weight:300;margin-top:54px}
.copyright a,.copyright a:hover{color:#fff;text-decoration:none}