/* John Morley Header: slate top bar, wordmark with a ridge line, mega menu and
   a full-screen phone drawer. The bar is fixed; header.js slides the top bar
   away on scroll (desktop) and tucks the whole bar on scroll down (phones). */
.jm.header { --tb: 40px; position: relative; z-index: 60; }
.jm .hdr-fix { position: fixed; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; transform: translateY(calc(-1 * var(--shift, 0px))); will-change: transform; }
.jm .hdr-space { height: calc(var(--tb) + var(--hdr)); }
.jm.header.no-top { --tb: 0px; }
/* Elementor editor: in the page flow, so the template can be edited */
/* tucks away on scroll down, back on scroll up, at every width (header.js) */
.jm .hdr-fix { transition: transform .35s var(--ease); }
.jm.header.is-tucked .hdr-fix { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); }
.jm.header.is-editing .hdr-fix { position: relative; top: 0; transform: none; }
.jm.header.is-editing .hdr-space { display: none; }

/* top bar */
.jm .topbar { background: #1C1C1E; color: rgba(255, 255, 255, .78); font-size: 14px; }
.jm .topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.jm .topbar__tel { display: flex; gap: 24px; }
.jm .topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.jm .topbar a:hover { text-decoration: underline; }

/* bar */
/* charcoal like the van, so the logo shows as drawn (white name, bright silver) */
.jm .hdr { position: relative; background: rgba(43, 43, 45, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.jm .hdr__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; height: var(--hdr); }

/* wordmark: a ridge line over the name, "Roofing" set small */
.jm .mark { position: relative; display: inline-grid; gap: 2px; padding-top: 10px; color: var(--slate); text-decoration: none; line-height: .9; }
.jm .mark__ridge { position: absolute; left: 0; top: 0; width: 46px; height: 10px; }
.jm .mark__ridge::before { content: ""; position: absolute; inset: 0; background: var(--clay); clip-path: polygon(0 100%, 50% 0, 100% 100%, 86% 100%, 50% 26%, 14% 100%); }
.jm .mark__name { font: 800 30px/.9 var(--font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: var(--slate); }
.jm .mark__name i { font-style: normal; color: var(--clay); }
.jm .mark__trade { font: 700 13px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--lead); }
.jm .mark--sm { padding-top: 0; }
.jm .mark--sm .mark__name { font-size: 24px; }
.jm .mark--img { padding-top: 0; }
.jm .mark--img img { width: auto; height: 52px; }
/* the logo (inline SVG, mark beside the name: wide, so it steps down as the bar narrows) */
.jm .mark--svg { display: inline-block; padding-top: 0; line-height: 0; }
.jm .mark--svg .lgo { display: block; width: auto; height: 44px; fill: none; stroke: none; overflow: visible; }
.jm .mark--sm.mark--svg { flex: 0 1 auto; min-width: 0; margin-right: 12px; }
.jm .mark--sm.mark--svg .lgo { width: 100%; height: auto; max-height: 40px; }

/* menu */
.jm .nav { display: flex; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.jm .nav a, .jm .nav button { display: inline-flex; align-items: center; gap: 6px; height: var(--hdr); margin: 0; padding: 0 11px; border: 0; border-radius: 0; background: none; color: #fff; font: 600 15.5px/1 var(--body); text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; }
.jm .nav a:hover, .jm .nav button:hover, .jm .nav button:focus, .jm .nav button[aria-expanded="true"] { background: none; color: var(--clay); }
.jm .nav button svg { width: 12px; height: 12px; transition: transform .2s; }
.jm .nav button[aria-expanded="true"] svg { transform: rotate(180deg); }

.jm .hdr__tools { display: flex; align-items: center; gap: 16px; }
.jm .hdr__call { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.jm .hdr__call svg { width: 20px; height: 20px; color: var(--clay); }
.jm .hdr__call:hover { color: var(--clay); }

/* plain icons: no border, no background (phones) */
.jm .hdr__ic { display: none; place-items: center; width: 44px; height: 44px; color: #fff; text-decoration: none; }
.jm .hdr__ic svg { width: 22px; height: 22px; }
.jm .hdr__ic:hover { color: var(--clay); }
.jm .hdr .ibtn { color: #fff; }
.jm .ibtn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--slate); cursor: pointer; }
.jm .ibtn:hover, .jm .ibtn:focus { background: none; color: var(--clay); }
.jm .ibtn svg { width: 24px; height: 24px; }
.jm .menu-btn { display: none; }

/* mega menu */
.jm .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(43, 43, 45, .35); }
.jm .mega[hidden] { display: none; }
.jm .mega__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 40px; padding-top: 36px; padding-bottom: 40px; }
.jm .mega__h { margin: 0 0 12px; font: 800 22px/1 var(--font-display); text-transform: uppercase; color: var(--lead); }
.jm .mega ul { margin: 0; padding: 0; list-style: none; }
.jm .mega li a { display: block; padding: 6px 0; color: var(--slate); font-size: 16px; text-decoration: none; }
.jm .mega li a:hover { color: var(--clay-ink); }
.jm .mega__urgent { display: grid; align-content: end; gap: 6px; padding: 24px; border-radius: var(--r); background: var(--slate); color: #fff; text-decoration: none; }
.jm .mega__urgent strong { font: 800 28px/1 var(--font-display); text-transform: uppercase; color: #fff; }
.jm .mega__urgent span { color: var(--lead-l); }
.jm .mega__all { grid-column: 1 / 4; display: flex; align-items: center; gap: 8px; margin-top: -12px; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 700; color: var(--clay-ink); text-decoration: none; }
.jm .mega__all svg { width: 18px; height: 18px; stroke-width: 1.8; transition: transform .2s; }
.jm .mega__all:hover svg { transform: translateX(4px); }

/* phone drawer */
.jm .drawer { position: fixed; inset: 0; top: var(--wp-admin--admin-bar--height, 0px); z-index: 90; display: none; flex-direction: column; padding: 0 var(--pad) 24px; background: var(--lime); overflow-y: auto; overscroll-behavior: contain; }
.jm .drawer.is-open { display: flex; }
.jm .drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; margin-bottom: 8px; }
.jm .drawer__top .ibtn { flex: none; }
.jm .drawer > a { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--slate); font: 800 34px/1 var(--font-display); text-transform: uppercase; text-decoration: none; }
.jm .drawer > a:hover { color: var(--clay-ink); }
.jm .drawer__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
html.jm-locked, html.jm-locked body { overflow: hidden; }

/* the menu keeps to one line: the number goes first, then the logo and links shrink,
   then (below 1100) the phone menu takes over */
@media (max-width: 1340px) {
	.jm .hdr__call span { display: none; }
}
@media (max-width: 1240px) {
	.jm .mark--svg .lgo { height: 38px; }
	.jm .nav a, .jm .nav button { padding: 0 8px; font-size: 15px; }
}
@media (max-width: 1099px) {
	.jm.header { --hdr: 62px; }
	.jm .mark--svg .lgo { height: 44px; }
	.jm .topbar__where { display: none; }
	.jm .topbar__in { justify-content: center; }
	.jm .hdr nav, .jm .hdr__tools .hdr__cta, .jm .mega { display: none; }
	.jm .menu-btn { display: inline-grid; }
	.jm .hdr__call span { display: inline; }
	/* the menu column is hidden: keep the icons in the right-hand column */
	.jm .hdr__tools { grid-column: 3; justify-self: end; }
}
@media (max-width: 640px) {
	/* phone header: 56px, plain icons evenly spaced */
	.jm.header { --hdr: 56px; }
	.jm .topbar { font-size: 13px; }
	.jm .topbar__tel { gap: 14px; }
	.jm .hdr__in { gap: 12px; }
	.jm .hdr__tools { gap: 0; margin-right: -10px; }
	.jm .hdr__call { display: grid; place-items: center; width: 44px; height: 44px; }
	.jm .hdr__call span { display: none; }
	.jm .hdr__call svg { width: 22px; height: 22px; }
	.jm .hdr__ic { display: grid; }
	.jm .mark { padding-top: 8px; }
	.jm .mark__ridge { width: 38px; height: 8px; }
	.jm .mark__name { font-size: 24px; }
	.jm .mark__trade { font-size: 11px; }
	.jm .mark--img img { height: 40px; }
	/* the logo takes the width the three icons leave, up to 42px tall */
	.jm .hdr__in { grid-template-columns: minmax(0, 1fr) 0 auto; }
	.jm .hdr .mark--svg { display: block; min-width: 0; }
	.jm .hdr .mark--svg .lgo { width: 100%; height: auto; max-height: 42px; }
	.jm .drawer__top { min-height: 60px; }
}