/*
Theme Name: BR Handyman
Description: Custom theme for BR Handyman (Hutchinson, MN) - work order / truck-decal design system.
Author: BR Handyman
Version: 1.0.0
Text Domain: br-handyman
*/

@font-face { font-family: "Lemon Milk"; src: url("assets/fonts/LEMONMILK-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("assets/fonts/LEMONMILK-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lemon Milk"; src: url("assets/fonts/LEMONMILK-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@keyframes splashIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes splashOut { to { opacity: 0; } }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: #F4EDDF; color: #1B1815; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { color: #A22B22; text-decoration: none; }
a:hover { color: #2D4762; }
input, textarea, select, button { font-family: inherit; }
::selection { background: #E9A81B; color: #1B1815; }

/* hover states (replace the design-tool "style-hover" trick with real CSS) */
.nav-link-accent:hover { color: #A22B22; }
.btn-call-now-header:hover { background: #1B1815; color: #F4EDDF; }
.btn-hero-phone:hover { background: #A22B22; }
.service-card { transition: border-color .15s; }
.service-card:hover { border-color: #A22B22; }
.btn-see-all:hover { background: #A22B22; }
.google-btn-primary:hover { background: #1557B0; }
.google-btn-secondary:hover { background: #F1F6FE; }
.contact-phone:hover { color: #E9A81B; }
.btn-submit:hover { background: #A22B22; }
.btn-footer-call:hover { background: #1B1815; }
.shot-figure { transition: border-color .15s; }
.shot-figure:hover { border-color: #A22B22; }
.cta-phone { transition: background-color .15s, color .15s; }
.cta-phone:hover { background: #F4EDDF; color: #1B1815; }
.filter-btn { background: #FBF7EC; transition: background-color .15s; }
.filter-btn:hover { background: #E9A81B; }
.filter-btn.is-active { background: #E9A81B; }

/* splash intro */
#splash { position: fixed; inset: 0; z-index: 200; background: #F4EDDF; display: grid; place-items: center; pointer-events: none; animation: splashOut 0.55s ease 1s forwards; }
#splash img { width: min(58vw, 440px); animation: splashIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* lightbox (Commercial + Before & After pages) */
#lightbox { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(27, 24, 21, 0.92); align-items: center; justify-content: center; padding: 48px; cursor: zoom-out; }
#lightbox.is-open { display: flex; }

@media (max-width: 768px) {
  [data-m="headwrap"] { padding: 10px 18px !important; gap: 10px 14px !important; }
  [data-m="nav"] { margin-left: 0 !important; width: 100%; justify-content: flex-start !important; gap: 10px 18px !important; }
  [data-m="nav"] > a { padding: 8px 0; }
  [data-m="nav"] > a[href^="tel:"] { margin-left: auto; min-height: 44px; padding: 10px 14px !important; }
  [data-m="hero-grid"] { grid-template-columns: 1fr !important; padding: 0 18px !important; }
  [data-m="hero-copy"] { padding: 38px 0 32px !important; }
  [data-m="hero-media"] { border-left: 0 !important; border-top: 3px solid #1B1815 !important; padding: 30px 0 38px !important; }
  [data-m="stats"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 0 18px !important; }
  [data-m="stats"] > div { padding: 20px 14px !important; border-right: 0 !important; }
  [data-m="stats"] > div > div:first-child { font-size: 21px !important; overflow-wrap: anywhere; }
  [data-m="stats"] > div:nth-child(odd) { border-right: 1px solid rgba(244,237,223,0.25) !important; }
  [data-m="stats"] > div:nth-child(-n+2) { border-bottom: 1px solid rgba(244,237,223,0.25) !important; }
  [data-m~="wrap"] { padding-left: 18px !important; padding-right: 18px !important; }
  [data-m="head"] > p, [data-m="head"] > a { margin-left: 0 !important; }
  [data-m="services-grid"], [data-m="reviews-grid"], [data-m="contact-grid"] { grid-template-columns: 1fr !important; }
  [data-m="contact-grid"] { gap: 40px !important; padding-left: 18px !important; padding-right: 18px !important; }
  [data-m="gallery-grid"] { grid-template-columns: 1fr 1fr !important; }
  [data-m~="lightbox"] { padding: 16px !important; }
  [data-m~="cta"] > a[href^="tel:"] { margin-left: 0 !important; font-size: 22px !important; }
  [data-m="reviews-head"] > div:last-child { margin-left: 0 !important; }
  [data-m="footwrap"] > nav { margin-left: 0 !important; width: 100%; gap: 14px 18px !important; }
  [data-m="footwrap"] > nav > a[href^="tel:"] { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 480px) {
  [data-m="gallery-grid"] { grid-template-columns: 1fr !important; }
  [data-m="hero-cta"] > a[href^="tel:"] { width: 100%; text-align: center; }
}