/* Lift Easy Garage Doors: shared base styles.
 *
 * The page designs carry their own styling inline (copied from the Claude
 * design canvas), with each page's extra rules in its own <style> block.
 * Every page holds two layouts: the desktop one (.view-d) and the phone one
 * (.view-m), and only one shows at a time.
 */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#111111;color:#ffffff;font-family:"Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid #FF3B3B;outline-offset:2px}

.view-m{display:none}
@media (max-width:600px){
  .view-d{display:none}
  .view-m{display:block}
}

/* Desktop header: the design was drawn at exactly 1440px with no scrollbar,
 * where it just fits. Keep it on one line at real laptop widths by letting
 * the gaps tighten instead of wrapping the phone button onto a second row. */
@media (min-width:601px){
  .view-d header > div{max-width:1440px !important;flex-wrap:nowrap !important;padding-left:clamp(24px,4vw,80px) !important;padding-right:clamp(24px,4vw,80px) !important}
  .view-d header > div > a:first-child{flex-shrink:0}
  .view-d header nav{gap:clamp(14px,1.9vw,36px) !important}
  .view-d header nav a{white-space:nowrap}
  .view-d header > div > a[href^="tel:"]{flex-shrink:0;white-space:nowrap;margin-left:clamp(4px,1vw,16px) !important}
}
/* The design hides the menu links below 1100px; they need room up to ~1240px */
@media (min-width:601px) and (max-width:1239px){
  .view-d header nav{display:none !important}
}
@media (min-width:601px) and (max-width:1300px){
  .view-d header > div > a[href^="tel:"]{padding-left:18px !important;padding-right:18px !important}
}

/* Phone header: the buttons keep their size; on the narrowest phones the red call
 * icon goes, since the number now shows under the logo */
.view-m header > a,.view-m header > button{flex-shrink:0}
@media (max-width:340px){
  .view-m header > a[href^="tel:"]{display:none !important}
}

/* Areas page map (js/map.js: MapLibre + OpenFreeMap). Once it loads, it
 * replaces the design's drawn map in the same frame; without it the drawn map stays. */
.le-map,.le-map.maplibregl-map{position:absolute;inset:0}
.le-map-ready [data-map-frame] > :not(.le-map),
.le-map-ready [data-map-host] > :not(.le-map){display:none !important}

/* "Send Steve a photo" issue picker (js/site.js): a bottom sheet on phones,
 * a centred panel on desktop */
.le-sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;font-family:"Archivo",system-ui,sans-serif}
.le-sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.le-sheet__panel{position:relative;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;background:#111111;color:#ffffff;border-top:6px solid #D7141A;padding:20px 20px max(20px,env(safe-area-inset-bottom))}
.le-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.le-sheet__tag{font-size:11px;font-weight:800;font-stretch:125%;letter-spacing:1.8px;color:#FF3B3B}
.le-sheet h2{margin:8px 0 0;font-size:26px;font-weight:800;font-stretch:105%;line-height:1.1}
.le-sheet__x{flex:none;width:44px;height:44px;background:transparent;border:2px solid #ffffff;color:#ffffff;font-size:18px;cursor:pointer}
.le-sheet__help{margin:10px 0 0;font-size:15px;line-height:1.45;color:#dddddd}
.le-sheet__list{margin-top:16px;display:flex;flex-direction:column;border-top:1px solid #333333}
.le-sheet__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 4px;border-bottom:1px solid #333333;font-size:17px;font-weight:700;color:#ffffff}
.le-sheet__opt span:last-child{color:#FF3B3B;font-weight:800}
.le-sheet__opt:hover,.le-sheet__opt:focus-visible{background:#1c1c1c}
@media (min-width:601px){
  .le-sheet{align-items:center}
  .le-sheet__panel{padding:26px 28px 28px}
}

/* Contact form helpers (hidden spam trap, send status) */
.le-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.le-status{margin:0;padding:10px 12px;border-left:4px solid #D7141A;background:#fdeced;color:#111111;font-size:15px;font-weight:700;line-height:1.45}
.le-status[hidden]{display:none}