/* =========================================================================
   C.M Roof Restorations - header
   Palette is taken from the logo: cyan #0998b8 (the theme base colour) with
   a deep slate ground so the white-wordmark logo sits correctly.
   ========================================================================= */

.cmrh {
  --cm-cyan:#0998b8;
  --cm-cyan-lt:#2DCEE3;
  --cm-cyan-dk:#077a94;
  --cm-ink:#0B1418;
  --cm-bar:#111E24;
  --cm-line:rgba(255,255,255,.10);
  --cm-txt:#E8EFF2;
  --cm-mut:#93A6AE;
  --cm-ease:cubic-bezier(.22,1,.36,1);
  position:relative; z-index:900;
}
.cmrh *, .cmrh-drawer * { box-sizing:border-box; }

.cmrh-wrap { width:100%; max-width:1320px; margin-inline:auto; padding-inline:22px; }

/* ---------- top bar ---------- */
.cmrh-topbar { background:var(--cm-ink); color:var(--cm-mut); font-size:13.5px; border-bottom:1px solid var(--cm-line); }
.cmrh-topbar__inner { display:flex; align-items:center; gap:18px; min-height:46px; flex-wrap:wrap; }
.cmrh-topbar__left, .cmrh-topbar__right { display:flex; align-items:center; gap:16px; }
.cmrh-topbar__right { margin-left:auto; }
.cmrh-topbar__sep { width:1px; height:15px; background:var(--cm-line); }

.cmrh-tp { display:inline-flex; align-items:center; gap:8px; color:var(--cm-txt); text-decoration:none; font-weight:500; transition:color .25s var(--cm-ease); }
.cmrh-tp:hover { color:var(--cm-cyan-lt); }
.cmrh-tp--muted { color:var(--cm-mut); }
.cmrh-tp__ico { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(9,152,184,.16); color:var(--cm-cyan-lt); flex:0 0 auto; }
.cmrh-tp__ico svg { width:13px; height:13px; }

.cmrh-socials { display:flex; align-items:center; gap:8px; }
.cmrh-soc { display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--cm-txt); text-decoration:none;
  transition:background-color .25s var(--cm-ease), color .25s var(--cm-ease), transform .25s var(--cm-ease); }
.cmrh-soc svg { width:15px; height:15px; }
.cmrh-soc:hover { background:var(--cm-cyan); color:#fff; transform:translateY(-2px); }
.cmrh-soc--whatsapp:hover { background:#25D366; }

/* ---------- main bar ---------- */
.cmrh-main { background:var(--cm-bar); border-bottom:1px solid var(--cm-line); }
.cmrh-main__inner { display:flex; align-items:center; gap:26px; min-height:110px; }

.cmrh-logo { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.cmrh-logo__img { display:block; width:auto; height:88px; max-width:none; transition:height .3s var(--cm-ease); }
.cmrh-logo__text { color:#fff; font-weight:800; font-size:20px; letter-spacing:.02em; }

/* ---------- desktop navigation ---------- */
.cmrh-nav { margin-left:auto; }
.cmrh-nav__list { display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.cmrh-nav__list li { position:relative; }
.cmrh-nav__list > li > a {
  position:relative; display:block; padding:12px 16px;
  color:var(--cm-txt); text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  transition:color .28s var(--cm-ease);
}
/* underline wipes in from the left */
.cmrh-nav__list > li > a::after {
  content:""; position:absolute; left:16px; right:16px; bottom:6px; height:2px;
  background:var(--cm-cyan-lt); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .38s var(--cm-ease);
}
.cmrh-nav__list > li > a:hover::after,
.cmrh-nav__list > li.current-menu-item > a::after,
.cmrh-nav__list > li.current-menu-ancestor > a::after { transform:scaleX(1); }
.cmrh-nav__list > li > a:hover,
.cmrh-nav__list > li.current-menu-item > a { color:#fff; }

/* dropdowns */
.cmrh-nav__list .sub-menu {
  position:absolute; top:calc(100% + 14px); left:0; min-width:238px;
  list-style:none; margin:0; padding:8px;
  background:#fff; border-radius:14px; box-shadow:0 24px 48px rgba(6,14,18,.28);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--cm-ease), transform .28s var(--cm-ease), visibility .28s;
}
.cmrh-nav__list li:hover > .sub-menu,
.cmrh-nav__list li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.cmrh-nav__list .sub-menu a {
  display:block; padding:11px 14px; border-radius:9px;
  color:#16232A; text-decoration:none; font-size:14.5px; font-weight:500;
  transition:background-color .22s var(--cm-ease), color .22s var(--cm-ease), padding-left .22s var(--cm-ease);
}
.cmrh-nav__list .sub-menu a:hover { background:rgba(9,152,184,.10); color:var(--cm-cyan-dk); padding-left:20px; }
.cmrh-nav__list .menu-item-has-children > a::before {
  content:""; position:absolute; right:2px; top:50%; width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg); opacity:.55;
}
.cmrh-nav__list .menu-item-has-children > a { padding-right:24px; }

/* ---------- actions ---------- */
.cmrh-main__actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; }

.cmrh-callbtn { display:none; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(9,152,184,.16); color:var(--cm-cyan-lt); text-decoration:none; }
.cmrh-callbtn svg { width:19px; height:19px; }

.cmrh-cta {
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px;
  background:var(--cm-cyan); color:#fff; text-decoration:none;
  font-size:15px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  overflow:hidden; isolation:isolate;
  box-shadow:0 10px 26px rgba(9,152,184,.34);
  transition:transform .3s var(--cm-ease), box-shadow .3s var(--cm-ease);
}
.cmrh-cta::before {
  content:""; position:absolute; inset:0; z-index:-1; background:var(--cm-cyan-dk);
  transform:translateX(-101%); transition:transform .42s var(--cm-ease);
}
.cmrh-cta:hover { color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(9,152,184,.46); }
.cmrh-cta:hover::before { transform:translateX(0); }
.cmrh-cta__ico { display:grid; place-items:center; transition:transform .32s var(--cm-ease); }
.cmrh-cta__ico svg { width:17px; height:17px; }
.cmrh-cta:hover .cmrh-cta__ico { transform:translateX(4px); }
.cmrh-cta--block { display:flex; justify-content:center; width:100%; margin-top:22px; }

/* ---------- burger ---------- */
.cmrh-burger {
  display:none; width:46px; height:46px; padding:0; margin-right:2px;
  background:rgba(255,255,255,.06); border:1px solid var(--cm-line); border-radius:12px;
  cursor:pointer; flex:0 0 auto;
  transition:background-color .25s var(--cm-ease), border-color .25s var(--cm-ease);
}
.cmrh-burger:hover { background:rgba(9,152,184,.18); border-color:rgba(9,152,184,.5); }
.cmrh-burger span { display:block; width:20px; height:2px; margin:4px auto; border-radius:2px; background:var(--cm-txt); }
.cmrh-burger span:nth-child(2) { width:14px; }

/* ---------- sticky ---------- */
.cmrh-main.is-stuck {
  position:fixed; top:0; left:0; right:0; z-index:980;
  background:rgba(17,30,36,.94); backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(6,14,18,.34);
  animation:cmrh-drop .42s var(--cm-ease) both;
}
.admin-bar .cmrh-main.is-stuck { top:32px; }
@keyframes cmrh-drop { from { transform:translateY(-100%); } to { transform:translateY(0); } }
.cmrh-main.is-stuck .cmrh-main__inner { min-height:86px; }
.cmrh-main.is-stuck .cmrh-logo__img { height:66px; }
/* ---------- left slide-in drawer (mobile + tablet only) ---------- */
.cmrh-drawer {
  --cm-cyan:#0998b8; --cm-cyan-lt:#2DCEE3; --cm-ink:#0B1418; --cm-bar:#111E24;
  --cm-line:rgba(255,255,255,.10); --cm-txt:#E8EFF2; --cm-mut:#93A6AE;
  --cm-ease:cubic-bezier(.22,1,.36,1);
  position:fixed; inset:0; z-index:1000; visibility:hidden; pointer-events:none;
}
.cmrh-drawer.is-open { visibility:visible; pointer-events:auto; }

.cmrh-drawer__overlay { position:absolute; inset:0; background:rgba(6,14,18,.62);
  opacity:0; transition:opacity .42s var(--cm-ease); }
.cmrh-drawer.is-open .cmrh-drawer__overlay { opacity:1; }

.cmrh-drawer__panel {
  position:absolute; top:0; left:0; bottom:0; width:min(360px,86vw);
  display:flex; flex-direction:column; padding:24px 22px 30px;
  background:linear-gradient(170deg,#16262E 0%,var(--cm-bar) 46%,var(--cm-ink) 100%);
  box-shadow:22px 0 60px rgba(0,0,0,.42);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-100%); transition:transform .46s var(--cm-ease);
}
.cmrh-drawer.is-open .cmrh-drawer__panel { transform:translateX(0); }

.cmrh-drawer__top { display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding-bottom:20px; border-bottom:1px solid var(--cm-line); }
.cmrh-logo--drawer .cmrh-logo__img { height:78px; }
.cmrh-drawer__close { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto;
  background:rgba(255,255,255,.06); border:1px solid var(--cm-line); border-radius:11px;
  color:var(--cm-txt); cursor:pointer;
  transition:background-color .25s var(--cm-ease), transform .25s var(--cm-ease); }
.cmrh-drawer__close:hover { background:rgba(9,152,184,.22); transform:rotate(90deg); }
.cmrh-drawer__close svg { width:18px; height:18px; }

/* menu items stagger in behind the panel */
.cmrh-drawer__list { list-style:none; margin:22px 0 0; padding:0; }
.cmrh-drawer__list li { border-bottom:1px solid rgba(255,255,255,.07); }
.cmrh-drawer__list > li { opacity:0; transform:translateX(-16px); }
.cmrh-drawer.is-open .cmrh-drawer__list > li {
  animation:cmrh-slidein .5s var(--cm-ease) forwards;
  animation-delay:calc(.14s + var(--i,0) * .055s);
}
@keyframes cmrh-slidein { to { opacity:1; transform:translateX(0); } }

.cmrh-drawer__list a {
  position:relative; display:block; padding:15px 14px 15px 18px;
  color:var(--cm-txt); text-decoration:none; font-size:16.5px; font-weight:600;
  transition:color .26s var(--cm-ease), padding-left .26s var(--cm-ease);
}
.cmrh-drawer__list a::before {
  content:""; position:absolute; left:0; top:50%; width:3px; height:0;
  background:var(--cm-cyan-lt); border-radius:2px; transform:translateY(-50%);
  transition:height .3s var(--cm-ease);
}
.cmrh-drawer__list a:hover, .cmrh-drawer__list .current-menu-item > a { color:var(--cm-cyan-lt); padding-left:26px; }
.cmrh-drawer__list a:hover::before, .cmrh-drawer__list .current-menu-item > a::before { height:22px; }
.cmrh-drawer__list .sub-menu { list-style:none; margin:0; padding:0 0 8px 14px; }
.cmrh-drawer__list .sub-menu a { font-size:15px; font-weight:500; color:var(--cm-mut); padding-block:11px; }
.cmrh-drawer__list .sub-menu li:last-child { border-bottom:0; }

/* contact pills */
.cmrh-drawer__contact { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px; }
.cmrh-pill { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:15px 6px; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.05); border:1px solid var(--cm-line);
  color:var(--cm-txt); font-size:12.5px; font-weight:600;
  transition:background-color .26s var(--cm-ease), border-color .26s var(--cm-ease), transform .26s var(--cm-ease); }
.cmrh-pill svg { width:19px; height:19px; color:var(--cm-cyan-lt); }
.cmrh-pill:hover { transform:translateY(-3px); border-color:rgba(9,152,184,.55); background:rgba(9,152,184,.14); color:#fff; }
.cmrh-pill--wa:hover { border-color:rgba(37,211,102,.6); background:rgba(37,211,102,.15); }
.cmrh-pill--wa svg { color:#25D366; }

.cmrh-drawer__meta { margin-top:24px; padding-top:20px; border-top:1px solid var(--cm-line);
  display:grid; gap:12px; }
.cmrh-drawer__meta p { display:flex; align-items:flex-start; gap:10px; margin:0;
  color:var(--cm-mut); font-size:13.5px; line-height:1.55; }
.cmrh-drawer__meta span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto;
  border-radius:50%; background:rgba(9,152,184,.16); color:var(--cm-cyan-lt); }
.cmrh-drawer__meta svg { width:13px; height:13px; }
.cmrh-socials--drawer { margin-top:22px; justify-content:center; }
.cmrh-socials--drawer .cmrh-soc { width:38px; height:38px; }
.cmrh-socials--drawer .cmrh-soc svg { width:17px; height:17px; }

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .cmrh-nav__list > li > a { padding:12px 12px; font-size:14.5px; }
  .cmrh-cta { padding:14px 20px; font-size:14.5px; }
  .cmrh-logo__img { height:78px; }
}

/* tablet and below: horizontal nav out, burger + left drawer in */
@media (max-width:1024px){
  .cmrh-nav { display:none; }
  .cmrh-burger { display:block; }
  .cmrh-main__inner { min-height:94px; gap:14px; }
  .cmrh-logo { margin-right:auto; }
  .cmrh-logo__img { height:72px; }
  .cmrh-main.is-stuck .cmrh-logo__img { height:62px; }
}

@media (max-width:860px){
  .cmrh-hide-md { display:none; }
  .cmrh-topbar__inner { justify-content:center; min-height:42px; gap:12px; }
  .cmrh-topbar__left { gap:12px; }
  .cmrh-topbar__right { margin-left:0; }
}

@media (max-width:720px){
  .cmrh-topbar { font-size:12.5px; }
  .cmrh-topbar__left .cmrh-tp:nth-child(3) span:not(.cmrh-tp__ico) { display:none; }
  .cmrh-topbar__sep { display:none; }
  .cmrh-main__actions .cmrh-cta { display:none; }
  .cmrh-callbtn { display:grid; }
  .cmrh-main__inner { min-height:84px; }
  .cmrh-logo__img { height:64px; }
  .cmrh-main.is-stuck .cmrh-logo__img { height:56px; }
  .cmrh-wrap { padding-inline:16px; }
}

@media (max-width:420px){
  .cmrh-logo__img { height:56px; }
  .cmrh-drawer__contact { grid-template-columns:repeat(3,1fr); gap:8px; }
  .cmrh-pill { padding:13px 4px; font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .cmrh *, .cmrh-drawer * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .cmrh-drawer.is-open .cmrh-drawer__list > li { opacity:1; transform:none; }
}
/* The drawer's own call-to-action stays visible at every width - it is the
   primary conversion path once the header button is hidden on small screens. */
.cmrh-drawer .cmrh-cta--block { display:flex !important; }
/* ---------- icon buttons: true optical centring -------------------------
   The theme applies its own padding and line-height to <button>, which was
   nudging the close glyph up and to the left inside its box. */
/* Centring only. Display is deliberately NOT set here: the burger and the
   call button are shown or hidden by breakpoint, and forcing display made
   the burger appear on desktop. */
.cmrh-drawer__close,
.cmrh-burger,
.cmrh-callbtn,
.cmrh-soc,
.cmrh-sub-toggle {
  align-items:center;
  justify-content:center;
  padding:0 !important;
  margin:0;
  line-height:0;
  text-align:center;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.cmrh-drawer__close { display:flex; }
.cmrh-soc { display:flex; }
.cmrh-drawer__close svg,
.cmrh-callbtn svg,
.cmrh-soc svg,
.cmrh-tp__ico svg,
.cmrh-pill svg,
.cmrh-drawer__meta svg { display:block; flex:0 0 auto; }

.cmrh-drawer__close { width:42px; height:42px; }
.cmrh-drawer__close svg { width:19px; height:19px; }

/* the burger keeps stacked bars, so restore column flow inside it */
.cmrh-burger { flex-direction:column; gap:4px; line-height:normal; }
@media (max-width:1024px){ .cmrh-burger { display:flex; } }
@media (max-width:720px){ .cmrh-callbtn { display:flex; } }
.cmrh-burger span { margin:0; }
/* ---------- drawer dropdowns ---------------------------------------------
   Collapsed by default and animated open on a measured height, so the
   transition is smooth regardless of how many child items there are. */
.cmrh-drawer__list .menu-item-has-children > a { padding-right:54px; }

.cmrh-sub-toggle {
  position:absolute; top:6px; right:4px;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; margin:0; line-height:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px; color:var(--cm-txt); cursor:pointer;
  transition:background-color .26s var(--cm-ease), border-color .26s var(--cm-ease), color .26s var(--cm-ease);
}
.cmrh-sub-toggle svg { display:block; width:16px; height:16px; transition:transform .38s var(--cm-ease); }
.cmrh-sub-toggle:hover { background:rgba(9,152,184,.20); border-color:rgba(9,152,184,.5); color:var(--cm-cyan-lt); }
.cmrh-sub-toggle[aria-expanded="true"] { background:var(--cm-cyan); border-color:var(--cm-cyan); color:#fff; }
.cmrh-sub-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }

.cmrh-drawer__list li { position:relative; }
.cmrh-drawer__list .sub-menu {
  overflow:hidden; height:0; opacity:.25;
  padding:0 0 0 14px;
  transition:height .40s var(--cm-ease), opacity .32s var(--cm-ease), padding-bottom .40s var(--cm-ease);
}
.cmrh-drawer__list li.is-open > .sub-menu { opacity:1; padding-bottom:8px; }
.cmrh-drawer__list .sub-menu li { border-bottom:1px solid rgba(255,255,255,.05); }
.cmrh-drawer__list .sub-menu li:last-child { border-bottom:0; }

/* ---------- desktop dropdown chevron ------------------------------------
   The static CSS caret is replaced with a real rotating chevron. */
.cmrh-nav__list .menu-item-has-children > a::before { display:none; }
.cmrh-nav__list .menu-item-has-children > a { padding-right:32px; }
.cmrh-nav__chev {
  position:absolute; right:12px; top:50%; margin-top:-8px;
  display:block; width:16px; height:16px; pointer-events:none;
  transition:transform .34s var(--cm-ease), color .34s var(--cm-ease);
  opacity:.7;
}
.cmrh-nav__chev svg { display:block; width:16px; height:16px; }
.cmrh-nav__list > li:hover > a .cmrh-nav__chev,
.cmrh-nav__list > li:focus-within > a .cmrh-nav__chev { transform:rotate(180deg); opacity:1; color:var(--cm-cyan-lt); }

/* nested (third level) opens to the side on desktop */
.cmrh-nav__list .sub-menu .sub-menu { top:-8px; left:calc(100% + 6px); }
.cmrh-nav__list .sub-menu .menu-item-has-children > a { position:relative; padding-right:28px; }
.cmrh-nav__list .sub-menu .menu-item-has-children > a::after {
  content:""; position:absolute; right:12px; top:50%; width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(-45deg); opacity:.5;
}
.cmrh-soc--linkedin:hover { background:#0A66C2; }
.cmrh-soc--youtube:hover  { background:#FF0000; }
.cmrh-soc--google:hover   { background:#4285F4; }
.cmrh-soc--facebook:hover { background:#1877F2; }
.cmrh-soc--instagram:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }