/* epicbarbers.co - pure HTML/CSS replacements for the Squarespace JavaScript (menu, video/WebGL backgrounds, marquee, lazy images) */

/* ---------- section backgrounds: video stills + isometric gradient */
.section-background{overflow:hidden}
.section-background .eb-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.section-background .section-background-overlay{background-color:#000}
.eb-iso{position:absolute;inset:0;
  background:
    linear-gradient(150deg,rgba(255,255,255,.55) 25%,transparent 25.5%) 0 0/60px 104px,
    linear-gradient(30deg,rgba(0,0,0,.025) 25%,transparent 25.5%) 0 0/60px 104px,
    linear-gradient(120deg,hsl(0,0%,100%) 0%,hsl(0,0%,86.27%) 100%)}
[data-section-theme="bright"] .eb-iso{background:
    linear-gradient(150deg,rgba(255,255,255,.18) 25%,transparent 25.5%) 0 0/60px 104px,
    linear-gradient(120deg,hsl(0,0%,92%) 0%,hsl(0,0%,86.27%) 100%)}

/* ---------- fluid image block (Squarespace sizes it with JS) */
.fluid-image-container .content-fill{position:absolute;inset:0}
.fluid-image-container .content-fill img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;opacity:1!important}

/* ---------- marquee: "New Location Open Now! 📍Kallo Town Centre" scrolling left, pauses on hover, faded edges */
.eb-marquee{position:relative;overflow:hidden;width:100%;padding:3% 0;color:var(--headingLargeColor,inherit);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.eb-mq-track{display:flex;width:max-content;animation:eb-marquee 40s linear infinite}
.eb-marquee:hover .eb-mq-track{animation-play-state:paused}
.eb-mq-run{display:flex;flex:0 0 auto}
.eb-mq-item{display:block;flex:0 0 auto;margin-right:.3em;white-space:nowrap;font-family:var(--heading-font-font-family);
  font-weight:var(--heading-font-font-weight,400);letter-spacing:var(--heading-font-letter-spacing,normal);line-height:1.2;font-size:1em}
@keyframes eb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){.eb-marquee{font-size:2.2rem!important}}
@media (prefers-reduced-motion:reduce){.eb-mq-track{animation:none}}

/* ---------- mobile menu: <details> instead of the JS burger overlay */
.eb-mnav{display:none}
.header-display-mobile .eb-mnav{display:block;margin-left:auto}
.eb-mnav>summary{list-style:none;cursor:pointer;position:relative;z-index:1002;padding:12px 4px;line-height:0;color:#fff}
.eb-mnav>summary::-webkit-details-marker{display:none}
.eb-mnav>summary:focus-visible{outline:1px dotted currentColor;outline-offset:2px}
.eb-burger,.eb-burger::before,.eb-burger::after{display:block;width:26px;height:2px;background:currentColor;transition:transform .2s ease,background-color .2s ease}
.eb-burger{position:relative;margin:8px 0}
.eb-burger::before,.eb-burger::after{content:"";position:absolute;left:0}
.eb-burger::before{top:-8px}
.eb-burger::after{top:8px}
.eb-mnav[open] .eb-burger{background-color:transparent}
.eb-mnav[open] .eb-burger::before{transform:translateY(8px) rotate(45deg)}
.eb-mnav[open] .eb-burger::after{transform:translateY(-8px) rotate(-45deg)}
.eb-mnav>nav{position:fixed;inset:0;z-index:1001;background:hsl(0,0%,10.98%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:6rem 6vw}
.eb-mnav ul{list-style:none;margin:0;padding:0;text-align:center}
.eb-mnav li a{display:block;padding:.6rem 0;color:#fff;font-family:var(--heading-font-font-family);font-size:2rem;line-height:1.3;text-decoration:none}
.eb-mnav li a[aria-current]{text-decoration:underline;text-underline-offset:.2em}
.eb-mnav-cta{display:inline-block;padding:1rem 2.2rem;border-radius:300px;background:#fff;color:#000!important;font-size:1rem;text-decoration:none}
.eb-mnav-cta:hover,.eb-mnav-cta:focus{background:hsl(0,0%,86.27%)}
.header-display-mobile .header-title-nav-wrapper{display:flex;align-items:center}
.header--menu-open-fix{overflow:hidden}

/* ---------- rebuilt pages (About / Services / Appointments / 404) */
.eb-section{position:relative;display:flex}
.eb-section .section-border{position:absolute;inset:0}
.eb-section .section-background{position:absolute;inset:0}
.eb-section .content-wrapper{position:relative;z-index:1;width:100%;padding:clamp(48px,8vw,120px) 0}
.eb-content{box-sizing:border-box;width:100%;max-width:var(--sqs-site-max-width,1500px);margin:0 auto;padding:0 var(--sqs-site-gutter,4vw)}
@media (max-width:767px){.eb-content{padding:0 var(--sqs-mobile-site-gutter,6vw)}}
.eb-hero{min-height:72vh;align-items:center}
.eb-hero .content-wrapper{padding-top:clamp(120px,14vw,200px)}
.eb-hero-text{max-width:760px}
.eb-hero-text h1{margin:0 0 .4em}
.eb-hero-text h3{margin:0 0 1.6em}
.eb-cols{display:grid;gap:clamp(32px,5vw,80px);align-items:start}
@media (min-width:768px){.eb-cols{grid-template-columns:1fr 1fr}.eb-cols--media{align-items:center}}
.eb-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.eb-content .sqs-block-button-container{margin:1.6em 0}
.eb-line{margin:.4em 0}
.eb-hours{list-style:none;margin:0;padding:0;max-width:420px}
.eb-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.7em 0;border-bottom:1px solid rgba(0,0,0,.15)}
[data-section-theme="dark"] .eb-hours li{border-color:rgba(255,255,255,.25)}
.eb-center{text-align:center;max-width:860px;margin:0 auto}
.eb-center .sqs-block-button-container{text-align:center}
.eb-cards{display:grid;gap:24px;margin:clamp(32px,5vw,64px) 0}
@media (min-width:768px){.eb-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.eb-cards{grid-template-columns:repeat(4,1fr)}}
.eb-card{padding:28px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.08)}
.eb-card h3{margin:0 0 .5em}
.eb-card p{margin:0}
.eb-note p{margin-bottom:0}

/* image block: Squarespace's JS gives the wrappers their height */
.fe-block .sqs-block-image .sqs-block-content,.fe-block .image-block-outer-wrapper,.fe-block .fluid-image-animation-wrapper{height:100%}
.eb-content .sqs-block-button-container--left{text-align:left}
.eb-content p,.eb-content .eb-line,.eb-hours,.eb-card p{font-size:1.27rem;line-height:1.6}