/* Leo Roofing - post-port fixes layered over leo.css.
 * 1) Mega-menu dropdowns + mobile slide-in (paired with leo-nav.js).
 * 2) Contrast fix for yellow "Learn more" links on white cards.
 * Palette: navy #092f5e, blue #0f4e9b, yellow #fff00f, yellow-soft #fff55c.
 */

/* ============ Desktop dropdowns ============ */
/* wrap is an existing nav wrapper div; keep layout untouched (panels are fixed) */
.leo-dd-wrap { position: relative; }

.leo-dd {
  position: fixed;
  z-index: 60;
  width: auto;
  min-width: 230px;
  max-width: min(840px, 94vw);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(9, 47, 94, 0.12);
  border-top: 4px solid #fff00f;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 24px 60px -20px rgba(9, 47, 94, 0.35);
  padding: 20px 22px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.leo-dd.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Sections sit side by side and wrap; the panel shrink-wraps small menus
 * (Commercial, About Us) and grows to max-width for big ones (Service Area). */
.leo-dd-grid { display: flex; flex-wrap: wrap; gap: 2px 30px; }
.leo-dd-col { min-width: 158px; padding-bottom: 6px; }
.leo-dd-head {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #092f5e;
  padding: 6px 8px 4px;
  text-decoration: none;
}
.leo-dd-head:hover { color: #0f4e9b; }
.leo-dd-list { list-style: none; margin: 0; padding: 0; }
.leo-dd-link {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  color: #092f5e;
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.leo-dd-link:hover { background: rgba(255, 240, 15, 0.18); color: #0f4e9b; }
.leo-dd-all {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f4e9b;
  text-decoration: none;
  border-top: 1px solid rgba(9, 47, 94, 0.1);
}
.leo-dd-all:hover { color: #092f5e; }

/* ============ Mobile slide-in ============ */
.leo-m { position: fixed; inset: 0; z-index: 100; }
.leo-m[hidden] { display: none; }
.leo-m-backdrop { position: absolute; inset: 0; background: rgba(9, 47, 94, 0.55); }
.leo-m-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: #fff;
  box-shadow: -16px 0 50px -20px rgba(9, 47, 94, 0.5);
  display: flex;
  flex-direction: column;
  animation: leoSlideIn 0.2s ease;
}
@keyframes leoSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.leo-m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 4px solid #fff00f;
  background: #092f5e;
  color: #fff;
}
.leo-m-title { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.leo-m-close {
  appearance: none; border: 0; background: transparent; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.leo-m-close:hover { background: rgba(255, 255, 255, 0.12); }
.leo-m-body { flex: 1; overflow-y: auto; padding: 8px 0 24px; }
.leo-m-row { border-bottom: 1px solid rgba(9, 47, 94, 0.08); }
.leo-m-top { display: flex; align-items: stretch; }
.leo-m-link {
  flex: 1; display: block;
  padding: 14px 18px;
  font-size: 15px; font-weight: 700;
  color: #092f5e; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.leo-m-link:hover { color: #0f4e9b; }
.leo-m-tog {
  appearance: none; border: 0; background: transparent;
  width: 52px; font-size: 14px; color: #092f5e; cursor: pointer;
  transition: transform 0.15s;
}
.leo-m-tog.is-open { transform: rotate(180deg); }
.leo-m-sub { padding: 0 0 12px; background: rgba(9, 47, 94, 0.03); }
.leo-m-sub[hidden] { display: none; }
.leo-m-sub-head {
  display: block; padding: 10px 18px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #0f4e9b; text-decoration: none;
}
.leo-m-sub-link {
  display: block; padding: 8px 18px 8px 28px;
  font-size: 14px; color: #092f5e; text-decoration: none;
}
.leo-m-sub-link:hover { background: rgba(255, 240, 15, 0.18); }
.leo-m-sub-all { font-weight: 700; color: #0f4e9b; }
.leo-m-cta {
  display: block; margin: 18px 18px 0;
  padding: 14px; text-align: center;
  background: #fff00f; color: #092f5e;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: 8px;
}
.leo-m-cta:hover { background: #fff55c; }

/* ============ Contrast fix ============ */
/* --accent is #fff00f (pure yellow); as TEXT on white cards ("Learn more"
 * eyebrow links, email hover) it fails WCAG. Only ever used on light
 * backgrounds in this build, so re-point accent TEXT to the brand blue.
 * Yellow used as a fill (bg-accent) and yellow text on dark sections
 * (text-[var(--color-leo-yellow)]) are untouched. */
.text-accent,
.hover\:text-accent:hover,
.group-hover\:text-accent,
.group:hover .group-hover\:text-accent {
  color: #0f4e9b !important;
}


/* ============ FAQ answer panels (rebuilt by leo-faq.js) ============ */
/* The static export dropped the answer panels; leo-faq.js re-injects them. */
.leo-faq-panel { padding: 0 0 16px; }
.leo-faq-panel[hidden] { display: none; }
.leo-faq-panel p { margin: 0; line-height: 1.6; }

/* ============ Footer social brand icons ============ */
/* Monochrome brand glyphs as CSS masks so they inherit the button's text color
 * (leo-yellow, inverting to navy on hover) exactly like the old letter codes.
 * Mask URLs resolve relative to this stylesheet -> assets/social/<name>.svg. */
.leo-soc{display:block;width:18px;height:18px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.leo-soc-google{-webkit-mask-image:url(social/google.svg);mask-image:url(social/google.svg)}
.leo-soc-facebook{-webkit-mask-image:url(social/facebook.svg);mask-image:url(social/facebook.svg)}
.leo-soc-instagram{-webkit-mask-image:url(social/instagram.svg);mask-image:url(social/instagram.svg)}
.leo-soc-yelp{-webkit-mask-image:url(social/yelp.svg);mask-image:url(social/yelp.svg)}
.leo-soc-linkedin{-webkit-mask-image:url(social/linkedin.svg);mask-image:url(social/linkedin.svg)}
.leo-soc-nextdoor{-webkit-mask-image:url(social/nextdoor.svg);mask-image:url(social/nextdoor.svg)}

/* ============ Dropdown column alignment ============ */
/* Columns without a heading would start higher than columns with one, leaving
 * the Residential mega-menu ragged. An empty placeholder head reserves the same
 * height so every column's link list lines up. */
.leo-dd-head-empty { visibility: hidden; }

/* ---- Mobile responsive pass (2026-06-15): stop any section pushing the page wider than the screen ---- */
@media (max-width: 639px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  /* large condensed display headings must wrap instead of overflowing their column */
  .font-display { overflow-wrap: anywhere; }
}