/* Hair Maya – additions on top of the design (style.css): branded scrollbar, smooth scrolling, logo size from the panel,
   WordPress admin bar, shared buttons. Colours come from the panel as CSS variables (functions.php → hm_vars_css). */

/* ── scrollbar in the brand colours ── */
:root{ --hm-sb-thumb:#1C1A18; --hm-sb-hover:#5E554D; --hm-sb-track:#E6DACD; --hm-sb-w:12px; }
html::-webkit-scrollbar{ width:var(--hm-sb-w); height:var(--hm-sb-w); }
html::-webkit-scrollbar-track{ background:var(--hm-sb-track); }
html::-webkit-scrollbar-thumb{ background:var(--hm-sb-thumb); border-radius:999px; border:3px solid var(--hm-sb-track); background-clip:padding-box; min-height:48px; }
html::-webkit-scrollbar-thumb:hover{ background:var(--hm-sb-hover); background-clip:padding-box; }
html::-webkit-scrollbar-corner{ background:var(--hm-sb-track); }
/* Firefox (no ::-webkit-scrollbar): the standard properties. Chrome ignores ::-webkit-scrollbar when these are set,
   so they are only given where the webkit selectors are not supported. */
@supports not selector(::-webkit-scrollbar){
	html{ scrollbar-color:var(--hm-sb-thumb) var(--hm-sb-track); }
}
::selection{ background:#1C1A18; color:#F7F3EE; }

/* ── smooth scrolling: smooth.js drives the wheel on desktop; the native smooth behaviour would fight it ── */
html.hm-smooth{ scroll-behavior:auto; }

/* ── full width: backgrounds run edge to edge, the content keeps the design's width ──
   The design was a 1440px frame (sections with 40px sides → 1360px of content). On wider screens the frame now fills
   the screen and the sides grow, so up to 1440px everything is exactly as designed. */
@media (min-width:821px){
	.hm-landing #main > section:not(.hero){ padding-left:max(40px, calc((100% - 1360px) / 2)) !important; padding-right:max(40px, calc((100% - 1360px) / 2)) !important; }
	.hm-landing .hero .slide{ left:max(0px, calc((100% - 1440px) / 2)); right:max(0px, calc((100% - 1440px) / 2)); }
	.hm-landing .hero-ctrl{ right:calc(max(0px, (100% - 1440px) / 2) + 56px); }
	.sticky-head header{ margin-left:max(40px, calc((100% - 1360px) / 2)) !important; margin-right:max(40px, calc((100% - 1360px) / 2)) !important; }
}

/* ── service cards: the badge stays on one line, and the small cards' titles keep their two lines
   (narrower picture, a little smaller title) so all small cards read the same ── */
.svc-body>span:first-child{ white-space:nowrap; }
@media (min-width:821px){
	.svc-grid .card:not(.span2) .svc-img{ width:38% !important; }
	.svc-grid .card:not(.span2) .svc-body{ width:62% !important; padding-inline:24px; }
	.svc-grid .card:not(.span2) .svc-body h3{ font-size:22px !important; line-height:1.25 !important; white-space:nowrap; }
}

/* ── floating WhatsApp: a fine light border (visible on the dark footer too); no shadow on phones ── */
.wa{ border:1px solid rgba(247,243,238,.55); }
@media (max-width:820px){
	.wa{ box-shadow:none; }
	/* header: 5px inside */
	.sticky-head header{ padding:5px !important; }
	/* hero: the picture runs edge to edge (its sides were cut into hard edges), the arrows sit smaller under it */
	.hero{ padding-bottom:60px !important; }
	.hero-photo{ width:calc(100% + 40px) !important; margin-inline:-20px; }
	.hero-ctrl{ bottom:12px; right:50%; transform:translateX(50%); gap:8px; }
	.hero-ctrl .hb{ width:36px; height:36px; background:transparent; }
	.hero-ctrl .hb svg{ width:15px; height:15px; }
	/* the slide's photo enters without the desktop's sideways offset (Safari applied it and the picture jumped) */
	.slide.on .s-photo{ animation-name:hm-photoin-m; }
}
@keyframes hm-photoin-m{ from{ opacity:0; transform:translateY(46px); } to{ opacity:1; transform:none; } }

/* ── logo height from the panel (design: 24px desktop, 20/18px on phones) ── */
.sticky-head header>a img{ height:var(--hm-logo-h,24px) !important; }
@media (max-width:820px){ .sticky-head header>a img{ height:calc(var(--hm-logo-h,24px) * .75) !important; } }

/* ── WordPress admin bar (logged-in only): keep the sticky header below it ── */
.admin-bar .sticky-head{ top:46px; }
@media (max-width:820px){ .admin-bar .sticky-head{ top:32px; } }
@media screen and (max-width:782px){ .admin-bar .sticky-head{ top:46px; } }
@media screen and (max-width:600px){ .admin-bar .sticky-head{ top:0; } }

/* ── live preview in the panel: open a mega menu / keep the burger menu open on request ── */
.mi.is-open .mega{ opacity:1; visibility:visible; transform:none; }
.mi.is-open .mlink{ opacity:1; transform:none; }
.mi.is-open>a::after{ transform:scaleX(1); }

/* empty grid cell that keeps a mega menu's card at the end of the row */
.mega-col:empty{ min-height:1px; }

/* ── pill buttons used outside the home page (pages, articles, 404) ── */
.hm-pill{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 28px; border:1px solid #1C1A18; border-radius:999px; background:transparent; color:#1C1A18; font:inherit; font-size:15px; line-height:1; cursor:pointer; text-decoration:none; white-space:nowrap; }
.hm-pill.is-dark{ background:#1C1A18; color:#F7F3EE; }
.hm-pill.is-dark:hover{ background:#3A342F; color:#F7F3EE; }

/* the hero's hidden slides are inert; "inert" must not hide them from the crossfade */
.slide[inert]{ pointer-events:none; }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }